jquery实现多选框全选、反选、自动全选、自动取消全选

最新推荐文章于 2023-09-12 10:54:03 发布

生命不息战斗不止！！！

最新推荐文章于 2023-09-12 10:54:03 发布

阅读量2.3k

点赞数 1

分类专栏：前端(js为主) 文章标签： checkbox js jq jquery vue

无

本文链接：https://blog.csdn.net/wwwwwww31311/article/details/115480851

版权

前端(js为主) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>

</head>
<body>
  
<div class="wrap">
  <table border="1px solid">
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="allBtn"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox" id="itemBox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="itemBox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="itemBox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="itemBox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
    
    </tbody>
  </table>
  <!-- <img src="04.gif" alt="突破了" title="对对对"> -->
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
  $(function () {

    $("img").attr("src", "11111");
    
    //思路是，点击全选按钮后全选按钮状态是已选中，
    //那么代表之前全选按钮时未选中状态，所以其它
    //所有按钮设为选中状态,反之，其它所有按钮取消全选状态
     $("#allBtn").click(function(){
         var ischecked = $(this).prop('checked');
         if(ischecked == true){
           $('input').prop('checked',true);
         }else{
          $('input').prop('checked',false);
         }

     });

     $('input#itemBox').click(function(){
        //补充：如果我们手动选中了除了全选按钮外的全部按钮，那么全选按钮自动被选定
        //思路是，根据全部多选框的个数（排除一个总选按钮）和已选中多选框的个数对比，一致则总选按钮被自动选定
        var checkedLen = $('input#itemBox:checked').length;
        var allInput = $('input#itemBox').length;
        if(allInput == checkedLen){
          $("#allBtn").prop('checked',true);
        }else{
          $("#allBtn").prop('checked',false );

        }


     })
  });
</script>

</body>
</html>

生命不息战斗不止！！！

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
jquery实现多选框全选、反选、自动全选、自动取消全选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <div class="wrap"> <table border="1px solid"> <thead> <tr> <th&
复制链接

扫一扫