首页 > 代码库 > checked多选,取消,反选

checked多选,取消,反选

2024-09-07 12:37:52   209人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" ondblclick="ChooseAll();">
        <input type="button" value="取消" ondblclick="CancelAll();">
        <input type="button" value="反选" ondblclick="TrunAll();">
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="c1">
                <tr >
                    <td ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
                 <tr>
                    <td  ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
                 <tr >
                    <td ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        function ChooseAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++){
                var current = doc[i];
                current.checked = true;
            }
        }
        function CancelAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++) {
                var current = doc[i];
                current.checked = false;
            }
        }
        function TrunAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++) {
                var current = doc[i];
                if (current.checked){
                    current.checked = false;
                }else {
                    current.checked = true;
                }
            }
        }
    </script>
</body>
</html>

 

checked多选,取消,反选


联系
我们