您的位置:首页 > Web前端 > JQuery

js\Jquery实现全选/反选等功能

2017-05-17 09:44 330 查看
这是我手写的js代码,大家直接复制就可以
    <br/>

    <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选

    <br/>

        <input type="checkbox"  name="items" id="zq" />足球

        <input type="checkbox"  name="items" id="lq"/>篮球

        <input type="checkbox"  name="items" id="pq"/>排球

        <input type="checkbox"  name="items" id="bq"/>棒球

        <br/>

    <input type="button" name="checkAll" id="check_all" value="全选"/>

    <input type="button" name="checkAll" id="check_allNo" value="全不选"/>

    <input type="button" name="checkAll" id="check_and" value="反选"/>

<script type="text/javascript">

    

        //全选

        var items=document.getElementsByName("items");

        document.getElementById("check_all").onclick=function(){

                for(var i=0;i<items.length;i++){

                    var item=items[i];

                    //ie支持,火狐不支持

                    //item.setAttribute("checked","checked");

                    item.checked="checked";

                    }

            }

        //全不选

        document.getElementById("check_allNo").onclick=function(){

            for(var i=0;i<items.length;i++){

                    var item=items[i];

                    //item.setAttribute("checked",null);

                    item.checked=null;

                }

            }

        //全选/全不选

        /* document.getElementById("checkItems").onclick=function(){

                for(var i=0;i<items.length;i++){

                    var item=items[i];

                    if(this.checked){

                        item.checked="checked";

                    }else{

                    item.checked=null;

                        }                    

                }

            } */

        //第二种方法

         document.getElementById("checkItems").onclick=function(){

            for(var i=0;i<items.length;i++){

                items[i].checked=this.checked;

            }

        }

        //反选

        document.getElementById("check_and").onclick=function(){

            for(var i=0;i<items.length;i++){

                if(items[i].checked){

                    items[i].checked=null;

                }else{

                    items[i].checked="checked";

                }            

            }

        }

//Jquery实现

//全选

$("#check_all").click(function(){

     $("input[name=items]").attr("checked","checked");

});

//全不选

$("#check_allNo").click(function(){

    $("input[name=items]").attr("checked",null);

});

//反选

$("#check_and").click(function(){

    $("input[name=items]").each(function(index,domEle){

        if(this.checked){

            $(this).attr("checked",null);

        }else{

            $(this).attr("checked","checked");

        }

     });

});
//全选/全不选

$("#checkItems").click(function(){

    if(this.checked){

        $("input[name=items]").attr("checked","checked");    

    }else{

        $("input[name=items]").attr("checked",null);    

    }

});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js 全选 反选 javascript