全选功能应用的比较频繁,以下是自己写的一个全选功能
<label>全选</label> <input type="checkbox" id="controllALl" name="checkAll"/></br> <?php // 模拟后台传过来的数据 $list = [ 0 => ['id'=>1,'name'=>'Chrdai'], 1 => ['id'=>2,'name'=>'Carroll'], 2 => ['id'=>3,'name'=>'Tom'], 3 => ['id'=>4,'name'=>'David'], ]; $i = 1; foreach($list as $key => $value){ ?> <input type="checkbox" id="checkid_<?php echo $i ?>" name="box" value="<?php echo $value['id'] ?>"/> <?php $i ++; }?> <input type="button" class="handleSelected" value="处理所选"/> <script> // 全选 $('#controllALl').click(function(){ var checklist = $('input[name="box"]'); // 获取所有的 checkbox // 若全选按钮被选中,则将所有 checkbox 设为 true,否则设为 false if($('#controllALl').prop('checked') == true){ for(var i=0; i<checklist.length; i++){ checklist[i].checked = true; } }else{ for(var j=0; j<checklist.length; j++){ checklist[j].checked = false; } } }) // 处理所选 $('.handleSelected').click(function(){ var checklist = $('input[name="box"]'); // 获取所有的 checkbox console.log(checklist); var idList = ""; // 将所有选中的 checkbox 的 id 拼成一个字符串 for(var i=0; i<checklist.length; i++){ if(checklist[i].checked==true){ idList += checklist[i].value + ','; } } if(idList == ''){ alert('你没有选中任何checkbox'); }else{ // 将选中得 checkbox 的 id 传到后台,进行相应的处理 } }) </script>
如有转载,请注明出处:http://www.cnblogs.com/chrdai/p/7156620.html