欢迎光临
我的个人博客网站

jQuery实现Checkbox复选框全选、全不选、反选等功能


前段时间使用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="全选">     &nbsp;     <input type="button" id="checkedNoBtn" value="全不选">     &nbsp;     <input type="button" id="checkedRevBtn" value="反选">     &nbsp;     <input type="button" id="submitBtn" value="提交"> </form> </div> </body> </html> 
代码运行效果:

jQuery实现Checkbox复选框全选、全不选、反选等功能

赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery实现Checkbox复选框全选、全不选、反选等功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏