집 > 기사 > 웹 프론트엔드 > 체크박스 구현을 위한 jQuery의 간단한 조작에 대한 자세한 예

체크박스 구현을 위한 jQuery의 간단한 조작에 대한 자세한 예

小云云원래의: 2017-12-19 16:59:441085검색

전체 선택, 전체 선택 해제, 전체 체크박스 그룹 선택 안함 문제에 대해 이 글에서는 체크박스를 구현하기 위한 jQuery의 간단한 조작을 주로 소개하는데, 관심 있는 친구들이 참고하면 도움이 될 것입니다. . 모든 사람.

모두 선택, 모두 선택 해제, 체크박스 그룹 전체 선택 해제를 하고, 선택한 체크박스의 값을 가져옵니다

1. 체크박스 그룹 전체를 선택하거나 취소하려면 모두 선택 버튼을 클릭하세요.
2. 모두 선택 버튼과 체크 박스 그룹 사이의 연결을 인식합니다. 체크 박스 그룹 중 하나가 선택되지 않은 경우 모든 체크 박스 그룹이 선택되면 id='checkedAll'인 모두 선택 버튼이 선택 취소되어야 합니다. 그런 다음 모두 선택 버튼도 선택해야 합니다.
3. 선택한 체크박스의 값을 가져옵니다.

코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对复选框组的全选操作</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      /*全选
      全选cheched和下方的checkbox按钮的checked是一致的，
      故可用this.checked。
      注意：$(this).checked是错的
      */
      $(&#39;#checkedAll&#39;).click(function() {
        $(&#39;[name=item]:checkbox&#39;).prop(&#39;checked&#39;, this.checked);
      });

      /*判断复选框的总数，是否和选中的复选框的数量相等
      相等：全选了
      不相等：没有全选
      */
      $(&#39;[name=item]:checkbox&#39;).click(function() {
        /*得到的是ul下 name=item 的复选框数组*/
        var $checkedArray = $(&#39;[name=item]:checkbox&#39;);
        /*$checkedArray.filter(&#39;:checked&#39;) -----> 已经选择的复选框 */
        $(&#39;#checkedAll&#39;).prop(&#39;checked&#39;,$checkedArray.length==$checkedArray.filter(&#39;:checked&#39;).length);
　　　　　　　　　　　　
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      //获取已选的复选框的值
      var checkedArray = new Array();//放已经选择的checkbox的value
      var count;//已经选择的个数
      $(&#39;#btn_submit&#39;).click(function() {
        checkedArray.length=0;
        count=0;
        $(&#39;[name=item]:checkbox:checked&#39;).each(function() {
          checkedArray.push($(this).val());
          count++;
        });
        if (checkedArray.length==0) {
          alert("Please check one at least.");
          return;
        }
        confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count);
      });
    })
  </script>
</head>
<body>
  <form action="#" method="POST">
    <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label>
    <ul>
      <li><input type="checkbox" name="item" value="basketball">篮球</li>
      <li><input type="checkbox" name="item" value="football">足球</li>
      <li><input type="checkbox" name="item" value="badminton">羽毛球</li>
      <li><input type="checkbox" name="item" value="pingpong">兵乓球</li>
      <li><input type="checkbox" name="item" value="swimming">游泳</li>
      <li><input type="checkbox" name="item" value="running">跑步</li>
    </ul>
    <button type="button" id="btn_submit" value="提交button">提交</button>
  </form>
</body>
</html>

코드에 부족한 점은 간결하지 않은 부분은 더욱 최적화할 수 있으니 더 좋은 아이디어나 구현 방법이 있다면 함께 교류하고 배워보세요.

체크박스 구현을 위한 jQuery의 간단한 조작에 대한 자세한 예

관련 기사