600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > getElementsByName 实现多选的全选与全不选功能

getElementsByName 实现多选的全选与全不选功能

时间:2020-02-12 12:13:54

相关推荐

getElementsByName 实现多选的全选与全不选功能

利用,

getElementsByName获得想要操作的对象。返回值是可读可写的。

因此,

修改为全选代码:

function checkall() {var alls = document.getElementsByName("hobby");// alert(alls)// alert(alls.length)// alert(alls[0].value)alls[0].checked = "checked"alls[1].checked = "checked"alls[2].checked = "checked"}

修改为全不选代码:

function checkno() {var alls = document.getElementsByName("hobby");alls[0].checked = ""alls[1].checked = ""alls[2].checked = ""}

整体代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function checkall() {var alls = document.getElementsByName("hobby");// alert(alls)// alert(alls.length)// alert(alls[0].value)alls[0].checked = "checked"alls[1].checked = "checked"alls[2].checked = "checked"}function checkno() {var alls = document.getElementsByName("hobby");alls[0].checked = ""alls[1].checked = ""alls[2].checked = ""}</script></head>兴趣爱好:<input type="checkbox" name="hobby" value="1" >1<input type="checkbox" name="hobby" value="2" >2<input type="checkbox" name="hobby" value="3" >3<br><button onclick="checkall()">全选</button><button onclick="checkno()">全不选</button></body></html>

结果:

初始状态:

点击全选:

点击全不选:

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