正常操作代码：

能正常地进行反选操作，以及复选框被点击后复选框的对应js全选代码不会失效。

<!DOCTYPE html>
<head>
    <script>
        window.onload = function(){
            var oBtnAll = document.getElementsByTagName('button')[0];
            var oBtnNo = document.getElementsByTagName('button')[1];
            var oBtnBack = document.getElementsByTagName('button')[2];
            var oCB = document.getElementsByTagName('input');

            oBtnAll.onclick = function(){
                for(i=0;i<oCB.length;i++)
                {
                    oCB[i].checked=true;
                }
            }

            oBtnNo.onclick = function(){
                for(i=0;i<oCB.length;i++)
                {
                    oCB[i].checked=false;
                }
            }

            oBtnBack.onclick = function(){
                for(i=0;i<oCB.length;i++)
                {
                    if (oCB[i].checked == true)
                    {oCB[i].checked=false;
                    continue;}

                    else{
                    oCB[i].checked=true;
                    continue;
                    }

                }
            }
        }

    </script>
</head>
<body>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>
    <br>
    <label ><input type="checkbox" name="test" class="heixiu">加芋圆</label>
    <label ><input type="checkbox" name="test" class="heixiu">加椰果</label>
    <label ><input type="checkbox" name="test" class="heixiu">加葡萄</label>
    <label ><input type="checkbox" name="test" class="heixiu">加香槟</label>
    <label ><input type="checkbox" name="test" class="heixiu">加布丁</label>
    <label ><input type="checkbox" name="test" class="heixiu">加诺瓦</label>

</body>
</html>

错误代码：

当复选框被点击后不会再被js控制。尽管在html文档中的checked属性仍然能根据js的点击进行更改，但效果实现上，checkbox的勾已经“不听话”了。

<!DOCTYPE html>
<head>
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtnAll = document.getElementsByTagName('button')[0];
            var oBtnNo = document.getElementsByTagName('button')[1];
            var oBtnBack = document.getElementsByTagName('button')[2];
            var oCB = document.getElementsByTagName('input');

            oBtnAll.onclick = function(){
                for(let i=0;i<oCB.length;i++)
                {
                    oCB[i].setAttribute("checked","true");
                }
            }

            oBtnNo.onclick = function(){
                for(let i=0;i<oCB.length;i++)
                {
                    oCB[i].removeAttribute("checked");
                }
            }

            oBtnBack.onclick = function(){
                for(let i=0;i<oCB.length;i++)
                {
                    if (oCB[i].checked == true)
                    {oCB[i].removeAttribute("checked");
                    continue;}

                    else{
                    oCB[i].setAttribute('checked','true');
                    continue;
                    }

                }
            }
        }

    </script>
</head>
<body>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>
    <br>
    <label ><input type="checkbox" name="test" class="heixiu">加芋圆</label>
    <label ><input type="checkbox" name="test" class="heixiu">加椰果</label>
    <label ><input type="checkbox" name="test" class="heixiu">加葡萄</label>
    <label ><input type="checkbox" name="test" class="heixiu">加香槟</label>
    <label ><input type="checkbox" name="test" class="heixiu">加布丁</label>
    <label ><input type="checkbox" name="test" class="heixiu">加诺瓦</label>

</body>
</html>

分析：

正确代码实现方式：

oCB[i].checked=true;
oCB[i].checked=false;

错误代码实现方式：

oCB[i].removeAttribute("checked");
oCB[i].setAttribute('checked','true');

在js中的domobj.checked：

HTML DOM checked 属性：

定义和用法：

checked 属性设置或返回 checkbox 是否应被选中。

语法：

checkboxObject.checked=true|false

说明：

该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发 onchange 事件句柄）。

保存了checkbox的状态，不像setAttribute（）的方式是直接进行属性的添加。

赏

菜菜子新人