【js】全选or！全选_方法内嵌方法20230719

渊宝我啊

已于 2023-07-19 15:54:27 修改

阅读量55

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-19 15:51:51 首次发布

本文链接：https://blog.csdn.net/qq_53433382/article/details/131810872

版权

有趣的装置


<html>
           <table ___________①______________>
              <thead>
                 <th>全选____②___<input type="checkbox" id="all_check" ___________③______________/> </th>
                 <th>部門</th><th>名前</th>
              </thead>
              <tbody>
                 <tr>
                    <td><input type="checkbox" name="rowCheck" __________④_______________/></td>
                    <td>開発1部</td>
                    <td>田中</td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" name="rowCheck" ___________⑤______________/></td>
                    <td>開発2部</td><td>佐藤</td>
                 </tr>
                 <tr>
                    <td><input type="checkbox" name="rowCheck" ___________⑥______________/></td>
                    <td>開発2部</td><td>田島</td>
                 </tr>
              </tbody>
           </table>
           <script>
             ___________⑦______________
           </script>
</html>
请补全上方JS部分代码，实现以下效果及功能。
JS功能：
  ①当勾选全选复选框时，下方所有复选框全部勾选。取消勾选全选复选框时，下方所有复选框全部取消勾选。
②当下方复选框全都勾选时，勾选全选复选框。当下方复选框任意一个未勾选时，取消勾选全选复选框。

结果：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<!-- ①_设置边框  宽度  表格页面居中 -->
<table border="1px" width="900" align="center">
    <thead>
    <!-- _② 全选文字 换行复选框   -->
    <th>全选 <br><input type="checkbox" id="all_check" onclick="checkAll()"/></th>
    <!--   ③ 使用onclick事件处理属性，赋予全选复选框功能，点击触发checkAll函数  -->
    <th>部門</th>
    <th>名前</th>
    </thead>
    <tbody align="center">
    <tr><!--④ 表格主体第一行第一列，包含一个复选框，使用onclick事件处理属性，赋予复选框检查功能，点击触发checkCheckBoxes函数-->
        <td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
        <td>開発1部</td>
        <td>田中</td>
    </tr>
    <tr><!--⑤ 表格主体第二行第一列，包含一个复选框，使用onclick事件处理属性，赋予复选框检查功能，点击触发checkCheckBoxes函数-->
        <td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
        <td>開発2部</td>
        <td>佐藤</td>
    </tr>
    <tr><!--⑥ 表格主体第三行第一列，包含一个复选框，使用onclick事件处理属性，赋予复选框检查功能，点击触发checkCheckBoxes函数-->
        <td><input type="checkbox" name="rowCheck" onclick="checkCheckBoxes()"/></td>
        <td>開発2部</td>
        <td>田島</td>
    </tr>
    </tbody>
</table>

<!-- JS代码部分 -->
<script>
    // 通过给定id = all_check获取全选复选框的引用
    var all_check = document.getElementById("all_check");
    // 通过给定name = rowCheck表格主体多个复选框的引用
    var checkBoxes = document.getElementsByName("rowCheck");
    // JS功能：①
    // 当点击全选复选框时调用此checkAll函数  触发全选功能
    function checkAll() {
        // 遍历所有var checkBoxes的复选框，将全选复选框的checked属性值逐一赋值给var checkBoxes内每一个checked属性
        //实现全选和全不选的JS功能：①


        for (var i = 0; i < checkBoxes.length; i++) {
            checkBoxes[i].checked = all_check.checked;
        }
    }

    // JS功能：②
    // 当点击下方复选框时调用此函数
    function checkCheckBoxes() {
        var allChecked = true;//预设布尔开关为true
        // 遍历所有var checkBoxes的复选框，逐一检查是否有未勾选的复选框
        for (var i = 0; i < checkBoxes.length; i++) {
            //使用非门，判断存在未选中checked则记录布尔开关为false
            if (!checkBoxes[i].checked) {
                allChecked = false;
                break;
                //跳出for循环
            }
        }
        // 将检查后记录的allChecked值赋予给id=all_check的全选复选框的checked属性，实现判断否勾选全选复选框勾选的功能
        all_check.checked = allChecked;
    }
</script>
</html>