标签:问题 put false col 实例 this his javascrip 属性
关于复选框全选 反选等问题的知识积累
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); });
标签:问题 put false col 实例 this his javascrip 属性
原文地址:https://www.cnblogs.com/lovable/p/7122382.html