table表格中如何全选---以及复选框实现反选

最新推荐文章于 2024-05-31 11:49:06 发布

qq_34802511

最新推荐文章于 2024-05-31 11:49:06 发布

阅读量6.6k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_34802511/article/details/82824209

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

table表格中如何全选，代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <table class="table table-striped table-bordered table-hover dataTables-example">
    <thead>
        <tr>
            <th><input type="checkbox" class="i-checks" id="questionCheck"/></th>
            <th>科目</th>
            <th>成绩</th>
            <th>性别</th>
        </tr>
    </thead>

    <tbody id="questionlist">
        <tr class="aa" draggable="true">
            <td><input class="i-checks" type="checkbox"></td>
            <td width="6%">语文</td>
            <td width="6%">86</td>
            <td width="6%">男</td>
        </tr>
        <tr class="aa" draggable="true">
            <td><input class="i-checks" type="checkbox"></td>
            <td width="6%">数学</td>
            <td width="6%">99</td>
            <td width="6%">男</td>
        </tr>
    </tbody>
 </table>

 <script src="./jquery-3.3.1.min.js"></script>
 <script>
   $(function(){
       $("#questionCheck").click(function () {
           var b = $('#questionlist tr.aa input[type="checkbox"]');
           if ($(this).prop('checked')) {
               b.prop('checked', true);
           } else {
               b.prop('checked', false);
           }
       });
   })
 </script>
 </body>
</html>

效果如图所示：样式难看，凑合着看吧

三种方法实现对多选框的反选，代码如下：

<body>
    <h1>遍历jQuery对象的内部的DOM对象</h1>
    <input type="button" value="反选" onclick="fan()" />
    <p>选择1:<input type="checkbox" /></p>
    <p>选择1:<input type="checkbox" /></p>
    <p>选择1:<input type="checkbox" /></p>
    <p>选择1:<input type="checkbox" /></p>
    <p>选择1:<input type="checkbox" /></p>
</body>

<script type="text/javascript">
    //方法一 面向过程的思路
    function fan(){
        var inp=$('input:checkbox');//获取input 取出的是jq对象
        for(var i=0;i<inp.length;i++){ //循环取出每一行的input
            //判断input是否有checked 这里inp[i]是dom对象,还要加$()转成dom对象
            if($(inp[i]).prop('checked')==true){
                $(inp[i]).prop('checked',false);  //改checked值为false
            }else {
                $(inp[i]).prop('checked',true);   //改checked值为true
            }
        }
    }

    //方法二  面向函数式的思路， 回调函数
    function fan(){
        $('input:checkbox').each(function(){
	    console.log(this);
	    //console.log($('input:checkbox'));
	    if($(this).prop('checked')==true){
	        $(this).prop('checked',false);  //改checked值为false
	    }else {
	        $(this).prop('checked',true);   //改checked值为true
	    }
        });
    }

    //方法三 更简化的方式， 直接对自己取反
    function fan(){
        $('input:checkbox').each(function(){
	    this.checked=!this.checked;
        });
    }
</script>

qq_34802511

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
table表格中如何全选---以及复选框实现反选

table表格中如何全选，代码如下：&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;met
复制链接

扫一扫