checkbox的全选与反选

SJY发表于:2018年06月01日 12:14 • 阅读:

方案一
如果第一选中,点击按钮所有变成未选中
第一个没选,点击按钮全部选中

<html>
<script>
function selectAll(){
var a = document.getElementsByTagName("input");
//alert(a[0].checked);
if(a[0].checked){//判断第一项是否被选中
for(var i = 0;i<a.length;i++){//如果选中了,每一项都变成没选中
if(a[i].type == "checkbox") a[i].checked = false;
}
}
else{
for(var i = 0;i<a.length;i++){//如果没选中,每一项都变成选中
if(a[i].type == "checkbox") a[i].checked = true;
}
}
}
</script>
<input type="checkbox" value=1 />
<input type="checkbox" value=2 />
<input type="checkbox" value=3 />
<input type="checkbox" value=4 />
<input type="checkbox" value=5 />
<input type="button" name="select" onclick="selectAll()" value="全选/全不选"/>
</html>

方案二
只要有任何一个选中,点击按钮全部变未选中,否则全部变为选中

function selectAll(){
    var flag = false;
    var inputs = document.getElementsByTagName("input");
    var length = inputs.length;
        for(var i = 0;i<length;i++){
                if(inputs[i].type == "checkbox" && inputs[i].checked==true){flag=true;break;}//只要有一个被选中,flag则为true
        }
        if(flag){//只要有一个被选中,点击按钮全部变成未选
                for(var i = 0;i<length;i++){
                        inputs[i].checked = false;
                }
        }else{//什么都没选中,点击按钮才会全部变成全选
                for(var i = 0;i<length;i++){
                        inputs[i].checked = true;
                }
        }
}

方案三
当全部选中时,点击按钮全部变成未选,其他情况点击按钮一律全选

function selectAll(){
    var flag = true;
    var inputs = document.getElementsByTagName("input");
    var length = inputs.length;
    for(var i = 0; i < length; i++)
    {
        if(inputs[i].type == "checkbox" && inputs[i].checked == false)//判断type是否为"checkbox",并且 复选框 没被选中
        {
            flag = false;//只要有一个复选框没被选中,就把 fasle 赋值给 flag;可以理解成 只有全选 flag 才会是默认的true
            break;//跳出循环
        }
    }
    //alert(flag);
        if(flag){//只有全选,点击按钮才会变成全部未选
                for(var i = 0;i<length;i++){
                                inputs[i].checked = false;
                }
        }else{//只要有一个复选框没被选中,就把所有复选框设为选中
                for(var i = 0;i<length;i++){
                                inputs[i].checked = true;
                }
        }
}

方案四(jQuery推荐方式)
使用jQuery方式,这里截取一段PHPCMS的全选反选功能函数

function selectall(name) {
        if ($("#check_box").attr("checked")=='checked') {//当id为check_box的元素属性checked的值为checked时
                $("input[name='"+name+"']").each(function() {//把input框属性name的值为传入的变量name的所有元素遍历出来
                          $(this).attr("checked","checked");//把该元素的属性checked设为checked
                        
                });
        } else {//否则,移除所有checked
                $("input[name='"+name+"']").each(function() {
                          $(this).removeAttr("checked");
                });
        }
}

使用jQuery可以非常方便的实现checkbox的全选与反选的功能。
方案五(JavaScript推荐方式)如果我要做的是一个非常简单的博客,那根本就用不上jQuery,是否能把方案四改成JavaScript版本呢?我已经帮大家做好了

<script>
function selectAll(name){
        var check_box=document.getElementById('check_box');
        var inputs=document.getElementsByName(name);
        var length = inputs.length;
        
        if(check_box.checked==true){//如果控制全选反选的复选框,选中时,那么下面所有的复选框全选
                for(var i = 0; i < length; i++){
                inputs[i].checked=true;        
                }
        }else{//如果没有选中,下面的所有复选框也全部设为未选
                for(var i = 0; i < length; i++){
                inputs[i].checked=false;        
                }
        }
}
</script>
<table>
<th><input type="checkbox" id="check_box" onclick="selectAll('ids[]');"></th>
<tr><td><input type="checkbox" name="ids[]" value="1" /></td></tr>
<tr><td><input type="checkbox" name="ids[]" value="2" /></td></tr>
<tr><td><input type="checkbox" name="ids[]" value="3" /></td></tr>
<tr><td><input type="checkbox" name="ids[]" value="4" /></td></tr>
<tr><td><input type="checkbox" name="ids[]" value="5" /></td></tr>
</table>


最后一个方案我修改了HTML代码,为的是告诉大家,在我给出的HTML代码的环境下,用这种方案效果最佳!

欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/1385.html

标签: Checkbox 全选

回复(0)