jquert结合原生javascript实现的checkbox全选与全不选

来源：互联网发布：2016access数据库教程编辑：程序博客网时间：2024/05/16 13:03

之所以要使用原生javascript，是因为jQuery的attr方法在这里不能实现，具体是怎么样的，我也不知道。

html代码：

<input type="checkbox" id="checkAll"><input id="staffItem1" type="checkbox"><input id="staffItem2" type="checkbox"><input id="staffItem3" type="checkbox"><a href="javascript:void(0);" id="checkAllOperation">全部选定</a><a href="javascript:void(0);"  id="cancleAllOperation">全部取消</a>

javascript代码：

得保证加载了jquery

     $(document).ready(function () {        //全选或全不选         $("#checkAll").click(function () {          var flag = document.getElementById('checkAll').checked;//判断全选按钮的状态，用jQuery不行          var length = $("[id^='staffItem']").length;          for (var i = 1; i < (length + 1); i ++) {            document.getElementById('staffItem' + i).checked = flag;          }        });         //如果全部选中勾上全选框，全部选中状态时取消了其中一个则取消全选框的选中状态         $("[id^='staffItem']").each(function(){           $(this).click(function () {            if ($("[id^='staffItem']:checked").length == $("[id^='staffItem']").length) {               document.getElementById('checkAll').checked = true;            } else {              document.getElementById('checkAll').checked = false;            }          });        });        //全部选定        $("#checkAllOperation").click(function(){          document.getElementById('checkAll').checked = true;          var length = $("[id^='staffItem']").length;          for (var i = 1; i < (length + 1); i ++) {            document.getElementById('staffItem' + i).checked = true;          }        });        //全部取消        $("#cancleAllOperation").click(function(){          document.getElementById('checkAll').checked = false;          var length = $("[id^='staffItem']").length;          for (var i = 1; i < (length + 1); i ++) {            document.getElementById('staffItem' + i).checked = false;          }        });      });

0 0