码迷,mamicode.com
首页 > 其他好文 > 详细

表格全选取消反选

时间:2018-11-03 01:51:55      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:doc   inpu   lan   nts   取消   body   反选   tab   htm   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<table border="1px">
    <tr>
        <th>ID</th>
        <th>IP</th>
        <th>Port</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>192.168.1.1</td>
        <td>3306</td>
        <td><input type="checkbox" class="chk"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>192.168.2.1</td>
        <td>3307</td>
        <td><input type="checkbox" class="chk"></td>
    </tr>

    <tr>
        <td>3</td>
        <td>192.168.21.1</td>
        <td>3369</td>
        <td><input type="checkbox" class="chk"></td>
    </tr>
</table>
<script>



    function selectAll() {
        var  inpts = document.getElementsByClassName(‘chk‘);
        for (var i = 0; i < inpts.length; i=i+1) {
            inpts[i].checked = true;

        }

    };

    function cancelAll() {
        var inpts = document.getElementsByClassName(‘chk‘);
        for (var i = 0; i < inpts.length; i++) {
            inpts[i].checked = false;

        }

    };

    function reverseAll() {
        var inpts = document.getElementsByClassName(‘chk‘);
        for (var i = 0; i < inpts.length; i++) {
            if (inpts[i].checked) {
                inputs[i].checked = false;
            }else {
                inpts[i].checked = true;
            }

        }

    }

  

表格全选取消反选

标签:doc   inpu   lan   nts   取消   body   反选   tab   htm   

原文地址:https://www.cnblogs.com/yspass/p/9898964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!