JS实现确认、反选、取消按钮功能

发布时间：2020-07-09 12:49:09 作者：feng945869004
来源：网络阅读：5408
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS实现确认反选和取消功能</title>
</head>
<body>
<table id="t1" border="1">
    <thead>
    <th>ID</th>
    <th>Content-01</th>
    <th>Content-02</th>
    </thead>
    <tbody id="checkboxList">
    <tr>
      <td><input type="checkbox" name="items" id="c1"></td>
      <td>Aliex</td>
      <td>抽烟</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="items" id="c2"></td>
      <td>Egon</td>
      <td>喝酒</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="items" id="c3"></td>
      <td>Wxx</td>
      <td>汤头</td>
    </tr>
    </tbody>
  </table>
  <input id="checkall" type="button" value="全选" >
  <input id="checkReverse" type="button" value="反选" >
  <input type="checkbox" id="flagCheck" hidden>
  <input id="checkNo" type="button" value="取消" >
<script src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">
    // 处理全选
    document.getElementById('checkall').onclick=function(){
    /*************************************************/
        // 获取所有的复选框
        var checkElements=document.getElementsByName('items');
        for(var i=0;i<checkElements.length;i++){
            var checkElement=checkElements[i];
            checkElement.checked="checked";
        }
    }
    /*************************************************/
    // 处理全不选
    document.getElementById('checkNo').onclick=function(){
        // 获取所有的复选框
        var checkElements=document.getElementsByName('items');
        for(var i=0;i<checkElements.length;i++){
            var checkElement=checkElements[i];
            checkElement.checked=null;
        }
    }
    /***************************************************/
    //反选
     document.getElementById('checkReverse').onclick=function(){
        // 获取所有的复选框
        var checkElements=document.getElementsByName('items');
        for(var i=0;i<checkElements.length;i++){
            var checkElement=checkElements[i];
            if (checkElement.checked) {
                checkElement.checked=null;
            }
            else{
                checkElement.checked="checked";
            }
        }
    }
    /***************************************************/
    //全选/不选
    document.getElementById('checkItems').onclick=function()
    {
     // 获取所有的复选框
        var checkElements=document.getElementsByName('items');
        if (this.checked) {
            for(var i=0;i<checkElements.length;i++){
                var checkElement=checkElements[i];
                checkElement.checked="checked";
            }
        }
        else{
            for(var i=0;i<checkElements.length;i++){
                var checkElement=checkElements[i];
                checkElement.checked=null;
            }
        }
    }
</script>
</body>
</html>
JS实现确认、反选、取消按钮功能

相关阅读
