碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
JQuery實現的 checkbox 全選；
下拉框功能 本文轉載自 查看原文 2017-02-22 17:27 3355 jQuery+JS/ Jquery、復選框全選、反選 1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選 2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中 3.子checkbox的數量和子checkbox被選中的數量一樣時，全選checkbox要被選中 [javascript] view plain copy //復選框事件 //全選、取消全選的事件 function selectAll(){ if ($("#SelectAll").attr("checked")) { $("input[name='subcheck']").attr("checked", true); } else { $(":checkbox").attr("checked", false); } } //子復選框的事件 function setSelectAll(){ //當沒有選中某個子復選框時，SelectAll取消選中 if (!$("#subcheck").checked) { $("#SelectAll").attr("checked", false); } var chsub = $("input[type='checkbox'][name='subcheck']").length; //獲取subcheck的個數 var checkedsub = $("input[type='checkbox'][name='subcheck']:checked").length; //獲取選中的subcheck的個數 if (checkedsub == chsub) { $("#SelectAll").attr("checked", true); } else{ $("#SelectAll").attr("checked", false);} } 全選checkbox的id是SelectAll，子checkbox的name是subcheck. HTML頁面代碼如下： [html] view plain copy <input type="checkbox" id="SelectAll" value="全選" onclick="selectAll();"/> <input type="checkbox" name="subcheck[]" value="1" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="2" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="3" onclick="setSelectAll();"/> <input type="checkbox" name="subcheck[]" value="4" onclick="setSelectAll();"/> 二、下拉框功能 效果： 代碼： HTML： <tr> <th scope="row">用戶類型(vip)</th> <td> <select name="user_type"> <option value="0" {if $member_arr['user_type']=='null'||$member_arr['user_type']==''} selected="selected"{/if}>普通</option> {loop $member_type_arr $k $v} <option value="{$v['user_type']}" {if $member_arr['user_type']== $v['user_type']}selected="selected"{/if}>$v['type_name']</option> {/loop} </select><b style="color:red">*</b> </td> </tr> php： 1)數據展示： $member_group_arr = db_factory::query ( sprintf ( "select group_id,groupname from %switkey_member_group", TABLEPRE ) ); $member_type_arr = array(array('user_type'=>'1','type_name'=>'正常'),array('user_type'=>'2','type_name'=>'活動vip'),array('user_type'=>'3','type_name'=>'酒店vip')); 2)數據接收： $select = $_POST['user_type']; × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找 elementUI的select下拉框增加checkbox選擇框（可全選/取消） 使用jquery select2實現下拉框搜索功能 elementui 實現select下拉框互斥功能 element UI select 下拉框 實現可搜索下拉框功能 jquery實現可編輯的下拉框( input + select ) jquery實現select下拉框可輸入+聯想關聯option 基於bootstrap selectpicker ，實現select下拉框模糊查詢功能 js實現Select下拉框具有輸入功能的方法 【經驗】angularjs 實現帶查找篩選功能的select下拉框 jQuery對下拉框Select操作總結 粵ICP備18138465號 © 2018-2025 CODEPRJ.COM
