JavaScript和jquery的全选与反选的实现

最新推荐文章于 2021-12-28 18:01:32 发布

xu97

最新推荐文章于 2021-12-28 18:01:32 发布

阅读量183

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_46399692/article/details/105229319

版权

JavaScript方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<style>
    div{
        margin-top: 300px;
        border: solid orange;
    }
</style>
</head>
<body>

<div align="center">
全选<input type="checkbox" id="all" onclick="checkAll(this.checked)"><p>
孙悟空：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
猪八戒：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
沙和尚：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
唐三帐：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
</div>

<script>
//全选的点击事件
function checkAll(a) {
    //alert(a)
    var oneEle = document.getElementsByName("one");
    if(a){
        //all为选中时，true
    for(var i = 0 ; i < oneEle.length ; i++){
        oneEle[i].checked=true;
        }
    }else {
        for(var i = 0 ; i < oneEle.length ; i++){
            oneEle[i].checked=false ;
        }
    }
}

//单个按钮的点击
function checkOne(a) {
    var oneEle = document.getElementsByName("one");
    var allEle = document.getElementById("all");
    for(var i = 0 ; i < oneEle.length ; i++){
        //当有一个按钮为未选中，全选按钮置为false
        if(!oneEle[i].checked){
            allEle.checked=false;
            break;
        }else{
            //当全部按钮为选中，全选按钮置为true
            allEle.checked=true;
        }
    }
}    
</script>

</body>
</html>

jquery方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
        <style>
        div{
            margin-top: 300px;
            border: solid orange;
        }
    </style>
</head>
<body>

<div align="center">
    全选<input type="checkbox" id="all" onclick="checkAll(this.checked)"><p>
    孙悟空：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
    猪八戒：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
    沙和尚：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
    唐三帐：<input type="checkbox" name="one" onclick="checkOne(this.checked)"><p>
</div>

<script>
    $(document).ready(function () {
        //jQuery on() 方法，语法$(selector).on(event,childSelector,data,function,map)
        //on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
        /**
         * event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
         childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
         data	可选。规定传递到函数的额外数据。
         function	可选。规定当事件发生时运行的函数。
         map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
         */
        $("#all").on("click",function () {
            //jquery的prop方法设置属性和值： $(selector).prop(property,value)
            $("input[name='one']").prop("checked",this.checked);
        })
    })



    $("input[name='one']").on("click",function () {
        var $ones = $("input[name='one']")
        $("#all").prop("checked",$ones.length==$ones.filter(":checked").length ? true :false);
    })
</script>

</body>
</html>