关于复选框全选 反选等问题的知识积累
1、项目中用到的js片段
<script type="text/javascript"> ???????jQuery(function () { ?//当全选点击的时候 ???????????jQuery("thead tr th:first input").click(function () { ???????????????//将要需要全选的复选框的选中状态同 全选复选框的选中状态一样 ???????????????jQuery("tbody tr td ?input").attr("checked", this.checked); ???????????}); ?//出全选以外的复选框 ???????????jQuery("tbody tr td ?input").click(function () { //如果当前复选框为false时 ?全选的复选框将不被选中 ???????????????if (!this.checked) { //设置全选的复选框为不选中 ???????????????????jQuery("thead tr th:first input").attr("checked", this.checked); ???????????????} else { //判断其他复选框是否全部选中 ?如果全为选中状态则将 全选复选框设置为选中状态true否则设置为false ???????????????????if (jQuery("tbody tr td ?input:checked").length == jQuery("tbody tr td ?input").length) { ???????????????????????jQuery("thead tr th:first input").attr("checked", this.checked); ???????????????????} ???????????????} ???????????}) ???????})</script>
最终效果
2、简单实例代码
//html片段<div id="allcheckbox"> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /></div><div id="childrencheckbox"> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /></div>
//js代码片段//注意:在这执之前要引入jquery的js额<script type="text/javascript"> ???????jQuery(function () { ???????????jQuery("#allcheckbox input").click(function () { ???????????????jQuery("#childrencheckbox ?input").attr("checked", this.checked); ???????????}); ???????????jQuery("#childrencheckbox ?input").click(function () { ???????????????if (!this.checked) { ???????????????????jQuery("#allcheckbox input").attr("checked", this.checked); ???????????????} else { ???????????????????if (jQuery("#childrencheckbox ?input:checked").length == jQuery("#childrencheckbox ?input").length) { ???????????????????????jQuery("#allcheckbox input").attr("checked", this.checked); ???????????????????} ???????????????} ???????????}) ???????})</script>
3、each的使用获取选中的项 并循环得到他的id
//id保存在复选框的pid属性中var intid = "";jQuery("tbody tr td ?input:checked").each(function (index, element) { ?intid = intid + jQuery(this).attr("pid") + ",";})if (intid == "") { ?alert("没有选中数据项"); ?return;}
//循环数据var arr1 = [ "one", "two", "three", "four", "five" ];$.each(arr1, function(){alert(this);});
jQuery 全选与不全选 Jquery each
原文地址:https://www.cnblogs.com/lovable/p/7122382.html