<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单操作多选框</title> </head> <body> <form action=""> <input type="checkbox">多选1 <br> <input type="checkbox">多选2 <br> <input type="checkbox">多选3 <br> <input type="checkbox">多选4 <br> <br> </form> <button id="quanxuan">全选</button> <button id="buxuan">全不选</button> <button id="fanxuan">反选</button> <script> var forms = document.forms; var inputs = forms[0].elements; //全选,把所有的多选按钮的checked值都修改为1 document.getElementById("quanxuan").onclick = function(){ for(var i = 0;i<inputs.length;i++){ //在对checked进行赋值的时候,1表示赋值为选中为true,0表示全部没选中为false; //只要不等于0的数字都为true,一等于0就是false inputs[i].checked = -100; } } //全部不选,把所有的多选按钮的checked值都修改为0 document.getElementById("buxuan").onclick = function(){ for(var i = 0;i<inputs.length;i++){ inputs[i].checked = 0; } } //反选,基本思路是获取页面上的多选按钮,然后判断按钮是选择状态还是未选择状态,然后改变其状态为反向 document.getElementById("fanxuan").onclick = function(){ for(var i = 0;i<inputs.length;i++) { //反选的逻辑,只要对他本身的状态取反就可以了, //对于数值来说 ,只要不等于0的数字都为true,一等于0就是false,所以非0取反就是0,0取反后就是非0; inputs[i].checked = !inputs[i].checked; } } </script> </body> </html>
如果用Jquery的方式来实现就更简单了 :注意button按钮会自动提交表单,所以要定义在form标签外部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery操作全选全不选和反选</title> <!--百度在线压缩地址--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> </head> <body> <form action="reg.php"> <p>请选择喜欢的水果 : </p> <p> <input type="checkbox">西瓜 </p> <p> <input type="checkbox">香蕉 </p> <p> <input type="checkbox">苹果 </p> <p> <input type="checkbox">草莓 </p> <p> <input type="checkbox">椰子 </p> </form> <p> <button id="all">全选</button> <button id="notall">全不选</button> <button id="unall">反选</button> </p> <script> //对三个选择按钮进行赋值 // 1:全选 $("#all").click(function(){ $(":checkbox").attr({"checked":true}); }); // 2:全不选 $("#notall").click(function(){ $(":checkbox").attr({"checked":false}); }); // 3:反选 $("#unall").click(function(){ $(":checkbox").each(function(){ this.checked = !this.checked; }); }); </script> </body> </html>
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
