根据以下的Demo,大概就可以看的明白
Demo:
<html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //alert("A="+dom_a.value+" || B="+dom_b.value); } //以下开始操作radio的取消和勾选 //原生js操作 function fn1(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //勾选 dom_a.checked = true; //dom_a.checked = 'false'; //dom_a.checked = 123; //取消勾选 dom_b.checked = ''; //dom_b.checked = false;//取消勾选 //dom_b.checked = null;//取消勾选 //dom_b.checked = undefined;//取消勾选 } //利用jQuery操作 function fn2(){ var jQ_a = $('#a2'); var jQ_b = $("#b2"); //勾选 jQ_a.prop('checked','abc'); //jQ_a.prop('checked','123'); //jQ_a.prop('checked','true'); //jQ_a.prop('checked',true); //jQ_a.prop('checked',123);//数字可以 //jQ_a.prop('checked',-1); //jQ_a.prop('checked',abc);//会报错,abc未定义 {所以预猜测checked只要有已定义的值即可实现选中(undefined代表未定义)} //取消勾选 jQ_b.prop('checked',''); //jQ_b.prop('checked',false); //jQ_b.prop('checked',null); //jQ_b.prop('checked',undefined);//没有任何效果,不会报错 } </script> <style> .own{ border:solid 2px red; padding:20px 5px 20px 40px; width:300px; margin:80 0 0 500; } </style> <head> <body> <!-- 通过实验得知: 初始化让单选框选中有4种方法可以实现: 1、checked 2、checked='checked'(建议用此方法,此方法对浏览器可以有很好的兼容性) 3、checked='true' 4、checked=true 小提示:通过给checked属性复制,只要checked存在, 赋予任何值都可以初始化选中(eg:checked='aaa' 或 checked='false') 不赋值都可以实现初始化选中 测试成功案例: [checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'], [checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1'] 当有多个被选中时,最后选中的单选框为最后一个 --> <div class='own'> <label>A1</label><input id='a1' type='radio' value='1' name='test1' checked /> <label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/> <label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' /> <label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true /> <button onclick='fn1()'>测试点击一下</button> </div> <div class='own'> <label>A2</label><input id='a2' type='radio' value='1' name='test2' /> <label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/> <label>C2</label><input id='c2' type='radio' value='3' name='test2' /> <label>D2</label><input id='d2' type='radio' value='4' name='test2' /> <button onclick='fn2()'>测试点击一下</button> </div> </body> </html>
以上这篇利用原生js和jQuery实现单选框的勾选和取消操作的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
jquery,单选框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“利用原生js和jQuery实现单选框的勾选和取消操作的方法”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍