在JS中解決關於複選框全選和取消選擇的問題

閒話少說，直接上案例：

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）；