效果示例
默认状态下:
勾选全选时:
任意取消勾选物品A/物品B/物品C时
实现代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选</title><script>function myAll() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {oneList[i].checked = all.checked;}}function myOne() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {if(oneList[i].checked == false) {all.checked = false;return;}}all.checked = true;}</script></head><body><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px"><tr><th>全选<input id="all" type="checkbox" onclick="myAll()" /></th><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>1</td><td>物品A</td><td>¥55</td><td>1</td><td>¥55</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>2</td><td>物品B</td><td>¥70</td><td>1</td><td>¥70</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>3</td><td>物品C</td><td>¥66</td><td>1</td><td>¥66</td></tr></table></body></html>