1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JavaScript实现全选/全不选操作

JavaScript实现全选/全不选操作

时间:2019-07-22 21:37:41

相关推荐

JavaScript实现全选/全不选操作

效果示例

默认状态下:

勾选全选时:

任意取消勾选物品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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。