原生JS实现全选与反选和jquery全选与反选

最新推荐文章于 2024-04-02 19:39:43 发布

wangyibo5843

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量1.6k

点赞数 1

分类专栏： jquery小实例文章标签：原生js实现反选全选 jquery实现全选反选 jquery javascript

本文链接：https://blog.csdn.net/wangyibo5843/article/details/49133413

版权

jquery小实例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="../jquery-2.1.4.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>全选与反全选</title>
</head>
<body>
<input type="checkbox" id="all">全选
<hr />
<input type="checkbox" name="p">1<br />
<input type="checkbox" name="p">2<br />
<input type="checkbox" name="p">3<br />
</body>
<script>

</script>
</html>
在script中添加如下代码实现原生Js反选与全选：
//原生Js实现反选全选。
var all = document.getElementById('all');
all.onclick = function(){
    var inp = document.getElementsByName('p');
    for(var i = 0, len = inp.length; i < len; i++){
        inp[i].checked = all.checked;
    }
}

在script中添加如下代码利用Jquery实现全选与反选：
$(function(){
    $("#all").click(function(){
        if(this.checked){
            $("input[name='p']").prop('checked',this.checked);
        }else{
            $("input[name='p']").prop('checked',false);
        }
    });
});
利用Jquery实现的时候需要注意的一个问题：Jquery在1.6+才支持prop。如果写成：
if(this.checked){
            $("input[name='p']").attr('checked',true);
        }else{
            $("input[name='p']").attr('checked',false);
        }
这样是不可行的。