1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="修改性别" id="bt1"/> 9 <input type="button" value="修改兴趣" id="bt2"/><br/> 10 <input type="radio" value="男" name="sex" id="ra1"/>男 11 <input type="radio" value="女" name="sex"/>女 <br/> 12 <input type="checkbox" value="" name="hoppy"/>吃饭 13 <input type="checkbox" value="" name="hoppy" id="cb1"/>睡觉 14 <input type="checkbox" value="" name="hoppy"/>玩游戏 15 <input type="checkbox" value="" name="hoppy" id="cb2"/>打篮球 16 <input type="checkbox" value="" name="hoppy"/>看书 17 18 <script> 19 //封装通过id获取元素函数 20 function my$(id) { 21 return document.getElementById(id); 22 } 23 24 //通过id获取bt1按钮元素,注册点击事件,添加事件处理函数 25 my$("bt1").onclick = function () { 26 //在表单标签中,如果属性和值只有一个,并且这个值是这个属性本身,那么可以用布尔类型代替 27 my$("ra1").checked = true; 28 }; 29 my$("bt2").onclick = function () { 30 my$("cb1").checked = true; 31 my$("cb2").checked = true; 32 }; 33 </script> 34 </body> 35 </html>
JavaScript DOM操作案例点击按钮修改性别跟兴趣
猜你喜欢
转载自www.cnblogs.com/cuilichao/p/9338910.html
今日推荐
周排行