checkbox全选与取消全选

最新推荐文章于 2022-03-28 21:55:35 发布

原创最新推荐文章于 2022-03-28 21:55:35 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #js复选框

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的批量选择功能，通过单击全选按钮来控制一组复选框的状态。此功能常见于网页表格中，方便用户进行多项选择操作。

<script type="text/javascript">

$("#clickAll").click(function(){   var obj = document.getElementsByName("chk_list");   var checked = true;   if(document.getElementById("clickAll").checked == false){      checked = false;   } else {      checked = true;   }   for(var i = 0; i< obj.length; i ++)   {      obj[i].checked = checked;   }});
</script>

<body>
   <table>
      <tr>
         <th>
            <input type="checkbox" id="clickAll">
         </th>
         <th>
            XXXX
         </th>
         <th>
            XXXX
         </th>
      </tr>
      <tr>
         <td>
            <input type="checkbox" name="chk_list">
         </td>
         <td>
            test001
         </td>
         <td>
            test001
         </td>
      </tr>
      <tr>
         <td>
            <input type="checkbox" name="chk_list">
         </td>
         <td>
            test002
         </td>
         <td>
            test002
         </td>
      </tr>
   </table>

</body>