全选和反选的操作思路如下:
首先获得全选反选框的状态值。
其次将所有的多选框加入列表 可以根据标签 可以根据ID name还可以根据class 等等方式 形成数组
最后 循环 设置每个多选框的值=全选/反选框的状态值。
我的写法如下。
<?php header("content-type:text/html;charset=utf8"); ?> <html> <head> <title>内容多选测试</title> </head> <body> <form name="duoxuan" action="duoxuan.php?act=delete"> <div> <dl> <?php for ($i = 0; $i < 10; $i++) { ?> <dd>第<?php echo $i + 1; ?>个多选框:<input name="dxk" type="checkbox"></dd> <?php } ?> <dd>全选<input type="checkbox" name="chkall" id="all" onclick="xuan(this.checked)"></dd> </dl> <dl> <dd> <button type="submit" value="提交">提交</button> </dd> </dl> <script> function xuan(e) { var a = document.getElementsByName('dxk'); for (var i = 0; i < a.length; i++) { a[i].checked = e; } } </script> </div> </form> </body> </html>
网上找了两个写法如下。
第二个写法和我的思路基本一样
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input type="checkbox" id="checkbox" value="1" onclick="check()" />全选/反选 <br /> <input type="checkbox" value="${article.id}" name="box" class="item" />奶茶<br /> <input type="checkbox" value="${article.id}" name="box" class="item"/>香蕉<br /> <input type="checkbox" value="${article.id}" name="box" class="item"/>橘子<br /> <input type="checkbox" value="${article.id}" name="box" class="item"/>苹果<br /> <input type="checkbox" value="${article.id}" name="box" class="item"/>梨子<br /> <script type="text/javascript"> function quanxuan(){ var $checkbox = $(".item"); var $checked = $checkbox.filter(":checked"); if($checkbox.length == $checked.length){ $("#checkbox").prop("checked",true); }else{ $("#checkbox").prop("checked",false); } } $(function(){ $("#checkbox").on("change",function(){ var checked = $(this).prop("checked"); // true / false $(".item").prop("checked",checked); quanxuan(); }); $("body").on("change" , ".item",function(e){ quanxuan(); }); }); </script> </body> </html>
第二种纯粹的js写法
<html> <meta charset="UTF-8"> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=document.getElementsByTagName("input"); for(var i=0;i<chk_list.length;i++) { if(chk_list[i].type=="checkbox") { chk_list[i].checked=isChecked; } } } </script> </head> <body> <h1>请选择你的爱好</h1> <form name="myForm1"> <input type="checkbox" name="cb1" checked>看书<br> <input type="checkbox" name="cb2" checked>上网<br> <input type="checkbox" name="cb3">游戏<br> </form> <hr> <form name="myForm2"> <input type="checkbox" name="cb" onclick="changeState(this.checked)">全选 </form> </body> </html>
转载请注明:刘磊博客 » JQurey 实现多选框 全选和反选