实现checkbox复选框全选、反选及全不选的代码

前端开发   发布日期:2023年05月27日   浏览次数:327

实现checkbox复选框全选、反选及全不选的示例代码,同时可以判断如果是禁用disabled状态的复选框会无效跳过。

HTML代码:

<input type="checkbox" name="xuanze_fz" value="九品源码" />
<input type="checkbox" name="xuanze_fz" value="PHP博客" />
<input type="checkbox" name="xuanze_fz" value="www.19jp.com" />

<button class="btn btn_big" type="button" onClick="chkall(0)" >反选</button>
<button class="btn btn_big" type="button" onClick="chkall(1)" >全选</button>
<button class="btn btn_big" type="button" onClick="chkall(2)" >全不选</button>

JS代码:

function chkall(v){
        var ck=document.getElementsByName("xuanze_fz");//定义checkbox数组变量
        for(var i=0;i<ck.length;i++){
            if (!ck[i].disabled){//被禁用的不执行操作选择,跳过
                if (v==0){
                    ck[i].checked=!ck[i].checked;
                }else if (v==1){
                    ck[i].checked='checked';
                }else if (v==2){
                    ck[i].checked='';
                }
            }
        }
}


以上就是实现checkbox复选框全选、反选及全不选的代码的详细内容,更多关于实现checkbox复选框全选、反选及全不选的代码的资料请关注九品源码其它相关文章!