关于checkbox全选功能的实现

要进行操作的DOM元素：

<input type="checkbox" id="cbAll" value="all">全选
爱好：
<input type="checkbox" name="cbHobby" value="song">唱歌
<input type="checkbox" name="cbHobby" value="dance">跳舞
<input type="checkbox" name="cbHobby" value="play">玩游戏
<input type="checkbox" name="cbHobby" value="eat">吃美食
<input type="checkbox" name="cbHobby" value="sleep">睡觉

显示出的样式 ：

要实现的功能：点击全选之后，所有的复选框都被选中。

效果图：

 

 

使用Jquery实现：

1 $("#cbAll").click(function(){
2     $("input[name='cbHobby']").prop("checked",$(this).prop("checked"));
3 });

 

使用Javascript实现：

1 var cbAll = document.getElementById("cbAll");
2 var cbHobby = document.getElementsByName('cbHobby');
3 cbAll.onclick = function(){
4     // 使用for循环遍历
5     cbHobby.forEach(function(item) {
6         item.checked = cbAll.checked;
7     });
8 } 

 

转载于:https://www.cnblogs.com/seventeenq/p/11258461.html