| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title></title> | |
| <style type="text/css"> | |
| .mytable | |
| { | |
| width: 300px; | |
| } | |
| .mytable td{height:30px;border:1px solid #aaccff;padding:3px 5px;} | |
| .mytable td label{margin-right:5px;} | |
| .box{border:1px solid #aaccff;padding:10px;margin:5px 3px;line-height:25px;} | |
| </style> | |
| <script src="Script/jquery-3.3.1.js"></script> | |
| <script type="text/javascript"> | |
$(function () { | |
//全选 $("#selectAll").click(function () { | |
| $(":checkbox").prop("checked", true); | |
}); | |
//全不选 $("#selectNotAll").click(function () { | |
| $(":checkbox").prop("checked", false); | |
| }); | |
//反选 $("#selectRevorse").click(function () {//方法一 | |
| $("input[type=checkbox]").each(function () { | |
| $(this).prop("checked", !$(this).prop("checked")); | |
| }); | |
| //$(":checkbox").each(function () {//方法二 | |
| // this.checked=!this.checked; | |
| //}); | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body style="font-size:12px;"> | |
| <div class="box"> | |
| 请编写javascript代码，完成如下功能要求：<br /> | |
| 1.实现全选、反选、全不选功能 | |
| </div> | |
| <div class="box1"> | |
| <table id="table1" class="mytable"> | |
| <tr> | |
| <td style="color:Red;font-weight:bold;font-size:13px;">问卷调查：您最喜欢歌手是谁？</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <label><input type="radio" name="selectMode" id="selectAll" />全选</label> | |
| <label><input type="radio" name="selectMode" id="selectNotAll" />全不选</label> | |
| <label><input type="radio" name="selectMode" id="selectRevorse" />反选</label> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <label><input type="checkbox" id="Checkbox3"/>刘德华</label> | |
| <label><input type="checkbox" id="Checkbox4"/>张学友</label> | |
| <label><input type="checkbox" id="Checkbox5" />孙燕姿</label> | |
| <label><input type="checkbox" id="Checkbox6" />刘欢</label> | |
| </td> | |
| </tr> | |
</table> | |
</div> | |
</body> | |
</html> | |
jQuery实现复选框的全选，全不选，反选
原文地址：https://www.cnblogs.com/zhrujia/p/9485122.html