首页 > 代码库 > 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件：
请选择您的爱好：<br> <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br> <input type="checkbox" name="hobby"value="足球"/>足球 <input type="checkbox" name="hobby"value="蓝球"/>篮球 <input type="checkbox" name="hobby"value="乒乓球"/>乒乓球 <input type="checkbox" name="hobby"value="羽毛球"/>羽毛球<br/> <input type="button" id="checkAll" value="全选"> <input type="button" id="reverse" value="反选"> <input type="button" id="disAll" value="全不选">
效果:
用jquery实现以上功能，其中复选框可以全选/全不选，任意一项取消，复选框也会取消，直接上代码
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ /* 全选按钮 */ $("#checkAll").click(function(){ $("input[name=‘hobby‘]").each(function(){ $(this).attr(‘checked‘,‘checked‘); }); }); /* 全不选 */ $("#disAll").click(function(){ $("input[name=‘hobby‘]").each(function(){ $(this).attr(‘checked‘,false); }); }); /* 反选 */ $("#reverse").click(function(){ $("input[name=‘hobby‘]").each(function(){ $(this).attr(‘checked‘,!$(this).attr("checked")) }); }); /* 全选 （复选框的全选）/全不选*/ $("#all").click(function(){ $("[name=hobby]:checkbox").each(function() { this.checked=$("#all")[0].checked; }); }); /* 全选（复选框），单个不选后状态设为false */ $("[name=‘hobby‘]").each(function () { $(this).click(function () { if ($("[name=‘hobby‘]:checked").length == $("[name=‘hobby‘]").length) { $("#all").attr("checked", "checked"); } else $("#all").removeAttr("checked"); }); }); }); </script>
值得一提的是复选框的全选全不选，采用js对象和jquery对象相互转化的思想，使得运算最简化。
用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。