html checked

最新推荐文章于 2023-09-01 17:55:04 发布
咸蛋超人1号
最新推荐文章于 2023-09-01 17:55:04 发布
阅读量402
点赞数 1
分类专栏： java 文章标签：前端 javascript servlet
本文链接：https://blog.csdn.net/my_superman/article/details/126872428
版权
java 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
 
        td,
        th {
            text-align: center;
            border: 1px solid;
        }
 
        div {
            margin-top: 10px;
            margin-left: 30%;
        }
 
        .out {
            background-color: white;
        }
 
        .over {
            background-color: pink;
        }
        .hide {
            display: none;
        }
    </style>
    <!-- <script src="js/jquery-3.3.1.js"></script> -->
    <script src="js/jquery-1.2.6.js"></script>
    <script>
        /*
          分析：
              1.全选：
                  * 获取所有的checkbox
                  * 遍历cb，设置每一个cb的状态为选中  checked
  
         */
 
 
        //1.在页面加载完后绑定事件
        window.onload = function () {
            
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为选中  checked
                    cbs[i].checked = true;
                }
            }
 
            document.getElementById("unSelectAll").onclick = function () {
                //全不选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为未选中  checked
                    cbs[i].checked = false;
                }
            }
 
            document.getElementById("selectRev").onclick = function () {
                //反选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //3.设置每一个cb的状态为相反
                    cbs[i].checked = !cbs[i].checked;
                }
            }
 
            document.getElementById("showSelect").onclick = function () {
                //显示选中行的值
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //2.遍历
                for (var i = 0; i < cbs.length; i++) {
                    if (cbs[i].checked) {
                        //3.获取checkbox的父节点（当前行tr）
                        tri = cbs[i].parentNode.parentNode
                        console.log(tri.innerHTML)
                        //4.获取当前行所有的子元素
                        tds = tri.children
                        console.log(tds.length)
                        //5.获取当前行所有子元素的值，第一个子元素是复选框
                        //所以循环从1开始
                        for (var i = 1; i < tds.length; i++) {
                            console.log(tds[i].innerHTML)
                        }
                    }
                }
            }
 
            document.getElementById("firstCb").onclick = function () {
                //第一个cb点击
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("checkbox");
                //获取第一个cb
 
                //2.遍历
                //   for (var i = 0; i < cbs.length; i++) {
                //       //3.设置每一个cb的状态和第一个cb的状态一样
                //       cbs[i].checked =  this.checked;
                //   }
                
                // var cnt = 0
                // all = this.checked;
                // $("input[type=checkbox][name=checkbox]").each(function (index, domEle) {
                //     //遍历所有复选框
                //     if (domEle.style.display != "none") {  // 如果该复选框显示
                //         domEle.checked = all
                //         cnt++
                //     }
                // });
                // console.log(cnt)
                // console.log($("input[type=checkbox][name=checkbox][hidden!='hidden']").length)
                console.log('!hide = ', $("input[type=checkbox][name=checkbox][class!=hide]").length)
 
                // if (this.checked) {
                //     $("input[type=checkbox][name=checkbox][style!='display: none;']").attr("checked", true);
                // }
                // else {
                //     $("input[type=checkbox][name=checkbox][style!='display: none;']").attr("checked", false);
                // }
                if (this.checked) {
                    $("input[type=checkbox][name=checkbox][class!=hide]").attr("checked", true);
                }
                else {
                    $("input[type=checkbox][name=checkbox][class!=hide]").attr("checked", false);
                }
                console.log('checked = ', $('input[type="checkbox"][name="checkbox"]:checked').length)
                
            }
            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //2.遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
 
                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
 
            }
 
            // $("input[type=checkbox][name=checkbox]").eq(1).css('display','none')
            // $("input[type=checkbox][name=checkbox]").eq(1).attr('style','display: none;');
        }
        
 
    </script>
 
</head>
 
<body>
 
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="Checkbox" id="firstCb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox", class="hide"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
        <tr>
            <td><input type="checkbox" name="checkbox"></td>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
 
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
        <input type="button" id="showSelect" value="显示选中行的值">
    </div>
</body>
 
</html>