使用JS及jquery两种方法完成复选框的全选，全不选，反选功能

最新推荐文章于 2024-09-23 15:38:48 发布

kitty479655237

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量866

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/kitty479655237/article/details/81084774

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、JS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="allSelect">全选</button>
<button id="cancelSelect">全不选</button>
<button id ="reverseSelect">反选</button>
<br>
<input type="checkbox" value="1">1 <br>
<input type="checkbox" value="2">2 <br>
<input type="checkbox" value="3">3 <br>
<input type="checkbox" value="4">4 <br>
<input type="checkbox" value="5">5 <br>
<input type="checkbox" value="6">6 <br>

<script>
    window.onload = function () {
       var inputs = document.querySelectorAll('input');
       $('allSelect').onclick = function(){
           for( var i=0; i<inputs.length; i++){
               inputs[i].checked = true;
           }
       };
        $('cancelSelect').onclick = function(){
            for( var i=0; i<inputs.length; i++){
                inputs[i].checked = false;
            }
        };
        $('reverseSelect').onclick = function(){
            for( var i=0; i<inputs.length; i++){
                inputs[i].checked =  !inputs[i].checked;
            }
        }

    };

    function $(id) {
        return typeof id === 'string'? document.getElementById(id) : null;
    }

</script>
</body>
</html>

二、Jquery实现

注意点：一开始我是用attr方法写的，但是发现只有一开始的时候有用，如果改变了其中复选框的状态，事件就没有作用了。

后来发现用prop方法可以实现，所以这里说下attr()和prop()之间的区别；

attr():获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

prop():获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

attr()传入的是attributeName，而prop()传入的是propertyName;

在这里，我们可以将attribute理解为“特性”，property理解为“属性”从而来区分俩者的差异。

jquery中attr和prop的区别介绍：

•对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

•对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="allSelect">全选</button>
<button id="cancelSelect">全不选</button>
<button id ="reverseSelect">反选</button>
<br>
<input type="checkbox" value="1">1 <br>
<input type="checkbox" value="2">2 <br>
<input type="checkbox" value="3">3 <br>
<input type="checkbox" value="4">4 <br>
<input type="checkbox" value="5">5 <br>
<input type="checkbox" value="6">6 <br>

<script>
$(function () {
     $('#allSelect').click(function () {
         $('input').prop('checked',true);
     });
     $('#cancelSelect').click(function () {
         $('input').prop('checked',false);
     });
     $('#reverseSelect').click(function () {
         $('input').each(function () {
             console.log(!$(this).prop('checked'))
             $(this).prop('checked',!$(this).prop('checked'))
         })
     });
 })

</script>
</body>
</html>