关于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实现：

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

 

使用Javascript实现：

var cbAll = document.getElementById("cbAll");
var cbHobby = document.getElementsByName('cbHobby');
cbAll.onclick = function(){
    // 使用for循环遍历
    cbHobby.forEach(function(item) {
        item.checked = cbAll.checked;
    });
}