js中复选框怎么做全选 但是不全部选中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中复选框怎么做全选 但是不全部选中相关的知识,希望对你有一定的参考价值。

参考技术A CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。
<script
language="javascript">
function
cli(Obj)

//获取控制其它复选框的对象obj
var
collid
=
document.getElementByIdx_x("all")
//获取需要全选,全不选功能的所有复选框
var
coll
=
document.getElementsByName(Obj)
//如果obj被选中,则全选
if
(collid.checked)
//循环设置所有复选框为选中状态
for(var
i
=
0;
i
<
coll.length;
i++)
coll[i].checked
=
true;
else//取消obj选中状态,则全不选
//循环设置所有复选框为未选中状态
for(var
i
=
0;
i
<
coll.length;
i++)
coll[i].checked
=
false;


</script>
----------------------------------------------------
下面是一组CheckBox复选框html代码
----------------------------------------------------
<input
name='多选项名称'
type='checkbox'
value=''
id="all"
onclick="cli('多选项名称');">
全选
<input
name='多选项名称'
type='checkbox'
value=''
>
A
<input
name='多选项名称'
type='checkbox'
value=''
>
B
<input
name='多选项名称'
type='checkbox'
value=''
>
C
<input
name='多选项名称'
type='checkbox'
value=''
>
D
<input
name='多选项名称'
type='checkbox'
value=''
>
E
<input
name='多选项名称'
type='checkbox'
value=''
>
F
----------------------------------------------------

js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中。

详解:

有两种方式使<input type="checkbox" />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg:<input type="checkbox" checked />

方法二:使用javascript使input对象的checked="true";  eg: document.getElementsByTagName(‘input‘)[0].checked=‘true‘;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
<script>
window.onload = function(){
    var aInput = document.getElementsByTagName(input);
    var oInput = aInput[0];
    var a = 0;
    var b = 0;
    aInput[0].onclick = function(){
        for (var i = 0; i < aInput.length; i++) {
            if(aInput[0].checked == true){
                aInput[i].checked = true;
            }else{
                aInput[i].checked = false;
            }
        }
    };
    for (var i = 1; i < aInput.length; i++) {
        aInput[i].onclick = function(){
            a = 0;
            b = 0;
            for (var i = 1; i < aInput.length; i++) {
                if (aInput[i].checked == false) {
                    a++;
                }else {
                    b++;
                }
            }
            if(a>0){
                oInput.checked = false;
            }else if(b==aInput.length-1){
                oInput.checked = true;
            };
        };
    }
};
</script>
</head>
<body>
<p><input type="checkbox" name="" />全选</p>
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
</body>
</html>

 

以上是关于js中复选框怎么做全选 但是不全部选中的主要内容,如果未能解决你的问题,请参考以下文章

checkbox做全选按钮

checkbox做全选按钮

点击按钮全选,所有复选框选中,再次点击,全部取消选中js

html 多选框 如何用js 控制全选 并且一键复制选中的多项值到剪贴板

全选按钮,点击全选,复选框全部选中

js怎么控制多个复选框的选中和取消选中