---恢复内容开始---

1.昨日作业讲解

day  53 js学习之

弄一个上图一样的选择器,可以全选,可以反选,取消

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*table{border: 2px solid black}*/
    </style>
    <script>
        //写一个函数 当触发按钮的时候执行这个函数
        function quanxuan(){
            //全选,先找出按钮对象
            var qelems=document.getElementsByClassName('c1');
            //循环取出所有的所有的对象,并将他的checked属性写为true,
            for (var i=0;i<qelems.length;i++){
                //checked 属性 为true的时候选中,是false时候取消选中
                qelems[i].checked=true;

            }
        }
        function fanxuan(){
            //全选,先找出按钮对象
            var qelems=document.getElementsByClassName('c1');
            //循环取出所有的所有的对象,并将他的checked属性写为true,
            for (var i=0;i<qelems.length;i++){
                //checked 属性 为true的时候选中,是false时候取消选中
                //在循环中找出属性为true的设置为false  将为false的设置为true
                if (qelems[i].checked==true){qelems[i].checked=false;}else
                 {qelems[i].checked=true;}

            }
        }

        function quxiao(){
            var qelems=document.getElementsByClassName('c1');
            //循环取出所有的所有的对象,并将他的checked属性写为false,
            for (var i=0;i<qelems.length;i++){
                //checked 属性 为true的时候选中,是false时候取消选中
                qelems[i].checked=false;
        }}
    </script>

</head>
<body>
<!--table 里边的border是特殊属性,不是style 里的, 不能直接在哪儿设置-->
<table  border="8">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td ><input class="c1" type="checkbox" ></td>
        <td>alex</td>
        <td>18</td>
    </tr>
    <tr>
        <td ><input  class="c1" type="checkbox" ></td>
        <td>agon</td>
        <td>18</td>
    </tr>
    <tr>
        <td ><input class="c1" type="checkbox" class="c2" ></td>
        <td>haha</td>
        <td>18</td>
    </tr>
    </tbody>
</table>
<input type="button" value="全选"  onclick="quanxuan();">
<input type="button" value="反选"  onclick="fanxuan();">
<input type="button" value="取消"  onclick="quxiao();">

</body>
</html>
代码

相关文章:

  • 2021-12-20
  • 2021-05-02
  • 2021-09-27
  • 2021-06-13
  • 2021-07-03
  • 2021-05-30
  • 2021-09-07
  • 2022-12-23
猜你喜欢
  • 2021-10-25
  • 2021-12-10
  • 2021-12-09
  • 2021-08-19
  • 2021-08-01
  • 2021-10-23
  • 2021-10-15
相关资源
相似解决方案