全选、全不选和反选的实现 -

zx_00

浏览: 5635 次
性别:
来自: 成都

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

全选、全不选和反选的实现

全选实现 js 反选实现 jQuery全选实现

做一个基本的全选、反选和全不选的按钮选择实现

纯javascript的DOM实现
代码如下：

<body>

<input id="one" name="mycheck" type="checkbox" onclick="checkchose()">篮球

<input id="two" name="mycheck" type="checkbox" onclick="checkchose()">足球

<input id="three" name="mycheck" type="checkbox" onclick="checkchose()">排球

<input id="four" name="mycheck" type="checkbox" onclick="checkchose()">网球

<input id="five" name="mycheck" type="checkbox" onclick="checkchose()">乒乓球

<br />

/*全选、反选、不选按钮实现*/

//全选

function allchose(){

var obj = document.getElementsByName("mycheck");

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

obj[i].checked = true;

}

document.getElementById("inverse").disabled = false;

document.getElementById("nochose").disabled = false;

}

//复选框只要有选中则解除反选和全不选按钮的锁定

function checkchose(){

var obj = document.getElementsByName("mycheck");

var count = obj.length;

var num = 0 ;

for(var i=0; i<count; i++){

if(obj[i].checked == true){

document.getElementById("inverse").disabled = false;

document.getElementById("nochose").disabled = false;

num++;

}

//全不选

function nochose(){

var obj = document.getElementsByName("mycheck");

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

obj[i].checked = false;

}

//反选

function inverse(){

var obj = document.getElementsByName("mycheck");

if(document.getElementById("allchose").disabled == false){

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

if(obj[i].checked == false){

obj[i].checked = true;

}else{

obj[i].checked = false;

}

</script>

</body>

---------------------------------------------------------------------------------------------------------------------------------

jQuery 函数库实现

<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <title></title>
</head>
<body>
    <input id="one" name="mycheck" type="checkbox" >篮球
    <input id="two" name="mycheck" type="checkbox" >足球
    <input id="three" name="mycheck" type="checkbox" >排球
    <input id="four" name="mycheck" type="checkbox" >网球
    <input id="five" name="mycheck" type="checkbox" >乒乓球
    <br />
    <button id="allchose" onclick="allchose()">全选</button>
    <button id="inverse" onclick=" inverse()" >反选</button>
    <button id="nochose" onclick="nochose()" >全不选</button>
    <script>
        /*全选、反选、不选按钮实现*/
        //全选
        function allchose(){
            $("input[type='checkbox']").attr("checked", true);
        }
        //反选
        function inverse(){
            $.each($("input[type='checkbox']"),function(i){
                this.checked = !this.checked;
            });
        }
        //全不选
        function nochose(){
            $("input[type='checkbox']").attr("checked", false);
        }

    </script>
</body>