jquery对复选框(checkbox)的操作(精华)

时间:2024-02-22 08:22:04


@{
  Layout = null;
}

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>CheckBoxSelect</title>
</head>
<body>
  <div>
    <table>
      <tr style="text-align:center">
        <td colspan="10">全选:<input type="checkbox" name="SelectAll" id="cb_select_all" style="width:50px;height:50px" /></td>
      </tr>
      <tr>
        <td>1:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_1" onclick="SingleSelect(\'1\')" /></td>
        <td>2:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_2" onclick="SingleSelect(\'2\')" /></td>
        <td>3:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_3" onclick="SingleSelect(\'3\')" /></td>
        <td>4:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_4" onclick="SingleSelect(\'4\')" /></td>
        <td>5:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_5" onclick="SingleSelect(\'5\')" /></td>
        <td>6:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_6" onclick="SingleSelect(\'6\')" /></td>
        <td>7:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_7" onclick="SingleSelect(\'7\')" /></td>
        <td>8:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_8" onclick="SingleSelect(\'8\')" /></td>
        <td>9:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_9" onclick="SingleSelect(\'9\')" /></td>
        <td>10:<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_10" onclick="SingleSelect(\'10\')" /></td>
      </tr>
    </table>
  </div>
</body>
</html>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script>
  $(function () {
    $(\'#cb_select_all\').click(function () {
      if ($(\'input[name="SelectAll"]\').is(\':checked\')) {
        $(\'input[name="cbCheckBox"]\').prop(\'checked\', true);//全选
      }
      else {
        $(\'input[name="cbCheckBox"]\').prop(\'checked\', false);//取消全选
      }
     });
    });
  //点击单个复选框时,全选的复选框要发生相应的变化
  function SingleSelect(id) {
    if ($(\'#cb_\' + id).is(\':checked\') == false) {
      $(\'#cb_select_all\').prop(\'checked\', false);//如果全部选中的子复选框有一个没选中了,则将全选复选框的状态变为未选中
    }
    else {
      var checkboxLength = $(\'input[name="cbCheckBox"]\').length;//全部子复选框的个数
      var checkedBoxLength = $(\'input[name="cbCheckBox"]:checked\').length;//子复选框选中的个数
      if (checkboxLength == checkedBoxLength) {
        //点击多个子复选框,当选中的复选框个数等于所有子复选框的个数,则要将全选复选框的转态变为选中
        $(\'#cb_select_all\').prop(\'checked\', true);
       }
    }
/*-------------注意-------------*/
/*
做这个时,一开始死活弄不出来,各种不满意,弄好久了,经过多方排查和找资料,终于解决了问题,总结了下,问题出现在两点:
1、传入的参数id要这种形式:$(\'#cb_\' + id),我一开始传入的参数是这个CheckBox的id,然后是:$(id).is(\':checked\'),
  看上去没错,但实际是该判断永远返回false,浪费了不少时间
2、问题出现在这里:$(\'#cb_select_all\').attr(\'checked\', false);但结果是该checkbox的状态始终是false,不管怎么弄都不行,
  我记得以前是可以这样的,不知道是不是因为新版jQuery的原因.后面百度看到有用prop这个属性,我就试了一下,完美解决问题!
  这段代码比我以前写的简洁多了(感悟的废话倒是多了点,哈哈),以后看下能不能提炼出更简洁的,若有人能写出更简洁的,希望不吝赐教啊!
*/
/*-------------获取选中值-------------*/

  //$(\'input[name="cbCheckBox"]:checked\').each(function(){
    // var checkedVal=$(this).val();
  //});
  }
</script>

代码截图:

 

 

 效果截图:

全选:

全不选:

当为全选状态时,若有单个不选,全选复选框也要变为未选中状态:

当一个个选中子复选框,直至把全部都选中时,全选的复选框也要变为选中状态: