欢迎光临
我们一直在努力

原生JS控制checkbox全选,全不选,反选,以及非全选状态(可用版)。checbox勾选状态不听使唤

今天用原生JS做项目时发现chekbox勾选状态似乎不听使唤,经过一测试,把一个可用的文档整理出来了,仅供参考。

1、设置checkbox状态:

//itemsElement.setAttribute("checked", "checked");
//itemsElement.checked = this.checked;
itemsElement.checked = true;

由于没研究太细致,前两种也可以设置,但在调试过程中会出现勾无法添加,或去掉,或明明添加了”checked” = “checked”属性,但勾却不显示,很是诡异。

最后,我在编码中全部统一使用文章附带代码的写法。

2、去除checkbox状态:

//itemsElement.setAttribute("checked", null); 此写法,在最新浏览器中好像不支持
//itemsElement.removeAttribute('checked');
itemsElement.checked = false;

以下是测试文档,如有错误欢迎留言。

注意,源码中注释掉的部分,可能会导致运行诡异,不建议,使用,或者有时间的话,请自行去调试,这点小东西,作者调试了几个小时。因为总是出现诡异的勾选状态,勾不显示。

好了,直接贴代码:

<!DOCTYPE >
<html>
<head>
    <title>关于checkbox全选、全不选、反选,全选/全不选切换</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选"/>
<input type="button" name="checkall" id="uncheckall" value="全不选"/>
<input type="button" name="checkall" id="check_revsern" value="反选"/>
</body>
<script language="JavaScript">

    var checkall = document.getElementById("checkall");
    var uncheckall = document.getElementById('uncheckall');
    var check_revsern = document.getElementById("check_revsern");
    var itemsElements = document.getElementsByName("items");

    //全选
    checkall.onclick = function () {
        var itemsElements = document.getElementsByName("items");
        for (var i = 0; i < itemsElements.length; i++) {
            var itemsElement = itemsElements[i];

            //itemsElement.setAttribute("checked", "checked");
            //itemsElement.checked = this.checked;
            itemsElement.checked = true;

        }
    }

    //全不选
    uncheckall.onclick = function () {
        for (var i = 0; i < itemsElements.length; i++) {
            var itemsElement = itemsElements[i];
            //itemsElement.removeAttribute('checked');
            itemsElement.checked = false;
        }
    }

    //反选
    check_revsern.onclick = function () {
        for (var i = 0; i < itemsElements.length; i++) {
            var itemsElement = itemsElements[i];
            if (itemsElement.checked == true) {
                //itemsElement.removeAttribute('checked');
                itemsElement.checked = false;
            } else {
                //itemsElement.setAttribute("checked", "checked");
                itemsElement.checked = true;
            }
        }
    }


    //全选/全不选
    document.getElementById("checkItems").onclick = function () {
        for (var i = 0; i < itemsElements.length; i++) {
            var itemsElement = itemsElements[i];

            if (this.checked == true) {
                //itemsElement.setAttribute("checked", "checked");
                itemsElement.checked = true;
            } else {
                //itemsElement.removeAttribute('checked');
                itemsElement.checked = false;
            }
        }
    }

    //非全选时,全选选择框去掉勾选
    window.onload = function () {

        var ach = document.getElementsByName("items");
        var autocheckItems = document.getElementById("checkItems");
        for (var i = 0; i < ach.length; i++) {
            ach[i].onclick = function () {
                if (!this.checked == true) {
                    //autocheckItems.removeAttribute('checked');
                    autocheckItems.checked = false;
                }
            };
        }
    }

</script>
</html>

 

赞(1)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 原生JS控制checkbox全选,全不选,反选,以及非全选状态(可用版)。checbox勾选状态不听使唤

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址