- A+
所属分类：Web前端
前段时间使用JavaScript写了一个简易版的Checkbox全选全不选功能
于是最近使用jQuery完善了Checkbox的反选、提交等功能，以下为完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用prop和checked实现复选框全选全不选反选等功能</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function () { // 全选按钮功能 $("#checkedAllBtn").click(function () { $(":checkbox").prop("checked", true); }); // 全不选按钮功能 $("#checkedNoBtn").click(function () { $(":checkbox").prop("checked", false); }); // 反选按钮功能 $("#checkedRevBtn").click(function () { $(":checkbox[name='items']").each(function () { // 每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（这里指不同的items复选框） this.checked = !this.checked; }); // 获取所有球类运动选项框的数量 var allCount = $(":checkbox[name='items']").length; // 获取当前球类运动选项框选中的数量 var checkedCount = $(":checkbox[name='items']:checked").length; // 如果复选框选中数量和总数量相同，则将全选/全不选按钮状态随之更改为true/false $("#checkedAllNone").prop("checked", allCount === checkedCount); }); // 提交按钮功能 $("#submitBtn").click(function () { // :冒号选择器要紧跟着前面的选择器，不能有空格，不然会失去效果 $(":checkbox[name='items']:checked").each(function () { // 在事件的function函数中，有一个this对象，这个this对象是当前正在相应的DOM对象（这里指选中的运动） alert(this.value); }); }); // 全选/全不选按钮功能 $("#checkedAllNone").click(function () { //在事件的function函数中，有一个this对象，这个this对象是当前正在相应的DOM对象（这里指全选/全不选按钮） $(":checkbox[name='items']").prop("checked", this.checked); }); // 当所有球类运动复选框都被选中时，全选按钮同时更改为被选中状态 $(":checkbox[name='items']").click(function () { // 获取所有球类运动选项框的数量 var allCount = $(":checkbox[name='items']").length; // 获取当前球类运动选项框选中的数量 var checkedCount = $(":checkbox[name='items']:checked").length; $("#checkedAllNone").prop("checked", allCount == checkedCount); }); }); </script> </head> <body> <div style="width:100%;text-align:center"> <form> <span>请选择你喜欢的多项球类运动吧：</span> <br><br> <input type="checkbox" id="checkedAllNone">全选/全不选 <br> <input type="checkbox" name="items" value="篮球">篮球 <input type="checkbox" name="items" value="足球">足球 <input type="checkbox" name="items" value="冰球">冰球 <input type="checkbox" name="items" value="棒球">棒球 <br><br> <input type="button" id="checkedAllBtn" value="全选"> <input type="button" id="checkedNoBtn" value="全不选"> <input type="button" id="checkedRevBtn" value="反选"> <input type="button" id="submitBtn" value="提交"> </form> </div> </body> </html> 代码运行效果：
