关于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 }