jquery实现全选反选操作 梦里梦外; 2022-06-04 09:13 189阅读 0赞 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>复选按钮</title> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ //获得所有name=cboxjquery对象 var a=$("input[name='cbox']"); //为全选按钮绑定点击事件 $("input[name='checkAll']").click(function(){ a.each(function(){ $(this).prop("checked",$("input[name='checkAll']").prop("checked")); }); }); //为反选按钮绑定点击事件 $("#btn").click(function(){ a.each(function(){ //每一个jquery对象设置为与当前状态相反的选择 $(this).prop("checked",!$(this).prop("checked")); }); //反选操作之后更改全选按钮的状态 change_checked_all(); }); //为每一个选择按钮绑定点击事件 a.each(function(){ $(this).click(change_checked_all); }); //根据当前所有复选按钮的状态更改全选按钮的状态 function change_checked_all(){ var ch=true; //判断是否所有选项都被选择 for(var i=0;i< a.size();i++){ if($(a.get(i)).prop("checked")==false){ ch=false; break; } } //根据所有选择按钮的状态更改全选按钮的状态 $("input[name='checkAll']").prop("checked",ch); } }) </script> </head> <body> <div id="div1" style="width: 300px;height: 200px"> <input type="checkbox" name="checkAll"/>全选<br/> <input type="checkbox" name="cbox"/>1<br/> <input type="checkbox" name="cbox"/>2<br/> <input type="checkbox" name="cbox"/>3<br/> <input type="checkbox" name="cbox"/>4<br/> <input type="checkbox" name="cbox"/>4<br/> <input type="checkbox" name="cbox"/>5<br/> <input type="checkbox" name="cbox"/>7<br/> <input type="checkbox" name="cbox"/>8<br/> <input type="checkbox" name="cbox"/>9<br/> <input type="button" value="反选" id="btn"/> </div> </body> </html>
还没有评论,来说两句吧...