示例之全选和反选以及取消


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <table border="1">
        <thead>
            <tr>
                <input type="button" value="全选" onclick="ChooseAll();"/>
                <input type="button" value="取消" onclick="CancelAll();"/>
                <input type="button" value="反选" onclick="ReverseAll();"/>
            tr>
        thead>
 
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" id="test"/>
                td>
                <td>test1td>
                <td>test1td>
            tr>
            <tr>
                <td>
                    <input type="checkbox" />
                td>
                <td>test2td>
                <td>test2td>
            tr>
            <tr>
                <td>
                    <input type="checkbox" />
                td>
                <td>test2td>
                <td>test2td>
            tr>
        tbody>
 
    table>
 
    <script>
        function ChooseAll() {
            var tb = document.getElementById('tb');
            //获取tb下所有的tr
            var tr_list = tb.children;
            for(var i=0;ilength;i++){
                //循环所有的tr，获取当前的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                //勾选
                checkbox.checked = true;
            }
        }
 
        function CancelAll() {
            var tb = document.getElementById('tb');
            var tr_list = tb.children;
            for(var i=0;ilength;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
 
        function ReverseAll() {
            var tb = document.getElementById('tb');
            var tr_list = tb.children;
            for(var i=0;ilength;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked = false;
                }else {
                    checkbox.checked = true;
                }
            }
        }
    script>
body>
html>

相关阅读:
【Python 千题 —— 基础篇】整数输入
【招生目录】 2023年北京交通大学计算机学院博士研究生招生专业目录
【金融项目】尚融宝项目（十六）
每天技术扩展记录
电脑进水无法开机怎么办电脑进水开不了机的解决方法
vue生命周期详解
2023华东交通大学计算机考研信息汇总
windows nodejs 15.0.0下载安装
采集拼多多商品详情api接口
Win10 开机突然不断重复诊断和自动修复，安全模式也进不了，如何解决？（已解决）

原文地址：https://blog.csdn.net/up1292/article/details/126686104