关于checkbox全选功能的实现

Posted 2022-05-22 seventeenq

要进行操作的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