この問題を解決するには、このチェックボックスを選択し、JSで選択解除

免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
このリンク: https://blog.csdn.net/javascript_meng/article/details/100050744

さらに騒ぎがなければ、直接ケースに:

HTML

<input type="checkbox" id="qx"> 全选/反选<br>
<div id="ip">
    <input type="checkbox">JavaScript
    <input type="checkbox">NodeJS
    <input type="checkbox">vue
    <input type="checkbox">react
    <input type="checkbox">angular
</div>

問題解決のアイデア:

自分のIDが見つける最初の必要性
のdivが続くがどのようにサブ要素の多くを知る必要があり
機能してクリックイベントを解決して、
ループの最後の使用判定セット

JS

   <script>
        var qx1 = document.getElementById('qx');
        var ip1 = document.getElementById('ip');
        var len = ip1.children.length;//div中子元素的个数 
        qx1.onclick = function () {
            if (qx1.checked == true) {
                for (var i = 0; i < len; i++) {
                    ip1.children[i].checked = true;
                }
            } else {
                for (var i = 0; i < len; i++) {
                    ip1.children[i].checked = false;
                }
            }
        }

    </script>

;:(このモードは、一度だけキャンセルワンクリックは、すべてのチェックボックスを選択し解決して、質問をクリックしますが、選挙後に完全があるだろう、未チェックのサブ要素をクリックして、すべての選択を解除されていないBUGを選択します)

おすすめ

転載: blog.csdn.net/javascript_meng/article/details/100050744