闲话少说,直接上案例:html
htmlvue
<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>
解题思路:react
首先须要找到他们的id
其次需知道div中有多少个子元素
而后用函数 解决点击事件
最后运用判断套循环语句web
jssvg
<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);函数