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

之所以要使用原生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;
          }
        });
      });