JavaScript学习练习程序DOM——爱好选择

来源：互联网发布：空间大师软件编辑：程序博客网时间：2024/05/23 02:02

效果图：

相关代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>全选、反选</title><script type="text/javascript">window.onload=function() {//全选/全不选document.getElementById("selectDeSelectAll").onclick=function() {var hobbys = document.getElementsByName("hobby");for(var i = 0; i < hobbys.length; i++) {hobbys[i].checked = this.checked;}}//按键：全选document.getElementById("bt1").onclick = function() {var hobbys = document.getElementsByName("hobby");for(var i = 0; i < hobbys.length; i++) {hobbys[i].checked = true;}}//按键：全不选document.getElementById("bt2").onclick = function() {var hobbys = document.getElementsByName("hobby");for(var i = 0; i < hobbys.length; i++) {hobbys[i].checked = false;}}//按键：反选document.getElementById("bt3").onclick = function() {var hobbys = document.getElementsByName("hobby");for(var i = 0; i < hobbys.length; i++) {hobbys[i].checked = !hobbys[i].checked;}}}</script></head><body><h2>请选择您的爱好：</h2><input type="checkbox" id="selectDeSelectAll">全选/全不选<br/><input type="checkbox" name="hobby" value="eat"/>吃饭 <input type="checkbox" name="hobby" value="sleep"/>睡觉 <input type="checkbox" name="hobby" value="game"/>打游戏 <input type="checkbox" name="hobby" value="study"/>学习 <br/><br/><input type="button" id="bt1" value="全选"/><input type="button" id="bt2" value="全不选"/><input type="button" id="bt3" value="反选"/><input type="button" id="bt4" value="提交"/></body></html>

阅读全文

0 0