<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全选反选</title> </head> <body> <div id="hobby"> <input type="checkbox" value="1"/>唱歌 <input type="checkbox" value="2"/>跳舞 <input type="checkbox" value="3"/>rap <input type="checkbox" value="4"/>篮球 </div> <input type="button" onclick="all_check()" value="全选"/> <input type="button" onclick="no_check()" value="不选"/> <input type="button" onclick="toggle_check()" value="反选"/> </body> </html> <script> hobby = document.getElementById('hobby') var ainput = hobby.getElementsByTagName('input') var len = ainput.length function all_check() { for(var i=0;i<len;i++) { //ainput[i] checked值选中 ainput[i].checked = true } } function no_check() { for(var i=0;i<len;i++) { ainput[i].checked = false } } function toggle_check() { for(var i=0;i<len;i++) { if(ainput[i].checked == true) { ainput[i].checked = false }else { ainput[i].checked = true } } } </script>
测试如下
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)