关于JavaScript选中Radio那点事

最新推荐文章于 2024-01-18 08:56:55 发布
原创 最新推荐文章于 2024-01-18 08:56:55 发布 · 304 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #火狐 #兼容性 radio

本文讨论了在不同浏览器环境下Radio按钮选择的问题，并分享了一个兼容性较好的解决方案，使用jQuery简化代码，提高可读性。 
    也做开发几年了，因为之前一直给政府做内部管理系统，基本只要保证IE可以正常运行行，所以一直也没关注过radio在别的浏览器上选中的问题。这两天一直在一个小bug上纠缠，就是这个问题。不是IE上的没法选中，就是火狐上没法选中。最后发现，还是刚开始学JS那会的方法最靠谱，但是需要一堆循环，代码可读性不是很好。现在有了Jquery这么好的工具，就简单许多了：
$("input[type='radio'][value='0']")[0].checked=true;
不知道还有没有更好的办法，这是目前我试出来兼容性最好的方法，还算比较简单吧，呵呵！

一道长一
关注
js判断radio是否被选中
11-12
php开发判断radio，此次应用在单选框中利用js判断。
精选资源
JavaScript中获取Radio被选中的值
01-21
原理就是：一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id=userlist method=post action=option.php> <input type=radio name=userid value=1>1 <input type=radio name=...
JS 如何获取radio选中后的值及不选择取radio的值
12-13
以下是网上摘下的文章（未测试但很规范可以模仿） 代码如下: <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <title>text</title> [removed] var chk = 0; [removed]=function (){ var chkObjs = document.getElementsByName(“radio”); for(var i=0;i<chkObjs.length;i++){ if(chkObjs[i].checked){ chk = i
Js获取单选框radio的几种方法
心有猛虎 细嗅蔷薇
11-03 3万+
首先，编写HTML如下：   &lt;form id="form1"&gt;         &lt;table  border="0"&gt;              &lt;tr&gt;                 &lt;td&gt;年龄段：&lt;/td&gt;                 &lt;td&gt;                    
js控制radio选中
前端学习日记
12-16 3万+
经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值，使用的$().attr("checked",true); 当切换的时候，把name相同的radio的attr("checked",false)，再把要选中的radio.attr("checked",true)； 但是问题来了，每个
js控制radio
Ethe的博客
08-25 2298
【代码】js控制radio。
JavaScript判断表单提交时哪个radio按钮被选中的方法
10-24
在JavaScript中，判断哪个单选按钮在表单提交时被选中是一个常见的需求。下面详细介绍利用JavaScript判断表单提交时哪个单选按钮被选中的方法。 首先，我们需要了解HTML表单和单选按钮的基本结构。单选按钮通过`...
JavaScript通过this变量快速找出用户选中radio按钮的方法
12-10
在JavaScript事件处理函数中，`this`通常指向触发事件的元素，所以在这里，它是指当前被选中的radio按钮。 `favAnimal`函数接收一个参数，即`this`引用的对象。通过`button.value`，我们可以获取到用户所选按钮的`...
JS 控制 radio 选中
qq_25354709的专栏
03-13 1万+
一、控制radio选中 HTML： &lt;div class="gender"&gt; &lt;input type="radio" name="gender" value="男" title="男" checked id="gender1"&gt; &lt;input type="radio" name="gen
JS Radio
弱智de克星
08-30 538
js radio
js radio选中跟取消选中
YY_Ylx_XX的博客
01-18 1393
js设置radio选中 : $("#radio1").attr("checked","checked"); 取消选中：$("#radio2").removeAttr("checked");
javascript控制html:radio 选中
Roger★L☆M☆J★
08-15 1589
    考试系统中，用到javascript控制radio的选取操作,主要思想就是取得上次操作选中的项的值存为hidden 然后在javascript中 通过循环取得这些值，然后和radio的value值进行对比，如果两者值一样则将radio的checked属性设置为true即可。function radio(){  var radio=document.getElementById("r
js原生、jquery单选框radio总结（获取值、设置默认选中值、样式）
热门推荐
zcc的博客
06-14 28万+
单选框 radio&lt;div class="radio-inline"&gt; &lt;input type="radio" name="killOrder" value="1"/&gt; &lt;label for="killOrder1"&gt;是&lt;/label&gt; &lt;/div&gt; &
js 得到radio选中的直
JimJin的专栏
11-03 174
[code="html"] Get radio values demo var getRadioValues = function(){ var inputs = document.getElementsByTagName('input') var values="" for(i=0; i
javascript 设置radio默认选中 如何用js给一组radio 设置选中， 不能通过名称，只能通过value,请看demo
continue my dream 技术只是工具，关键在于思想
08-08 6208
&lt;input type="radio" value="1" checked="checked" name="group1" /&gt;radio1 &lt;input type="radio" value="2" name="group1" /&gt;radio2 &lt;input type="radio
javascript的checkbox和radio的选中控制和取值
代码笔记
02-27 1142
获取radio的选中值（单选）: var ParentJob = $("input[name='ParentJob'][type='radio']:checked").val(); 获取checkbox的选中值（多选）: var id_array = new Array(); $('input[name="Job"][type="checkbox"]:checked').each(fu...
js组件：radio组件
new___Smile的博客
06-20 1128
raido的两种用法： 1 先选在弹出相关内容 2 页面有的，只需要自己选 代码如下：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>radio组件演示</title> <style type="text/c
js如何设置radio选中
Asan
08-26 4万+
要求：编辑页面默认设置radio选中 jsp页面： *是否默认店铺： 是 否 js写法： //是否默认店铺 if(data.isDefaultStore==1){ //是默认店铺 $("#radio1").attr("checked","checked");
JavaScript、jQuery获取单选框（radio）的选中值（学习笔记）
廖小生的博客
04-05 1985
HTML代码： 二、处理表单的JS 1.显示及隐藏： 2.读取单选值： 三、相关扩展 由于只有五个单选，所以我使用的是五段相似的for循环进行处理，实际上可以外层再套for循环使得可以从1-5遍历单选框，实现代码复用，如：
javascript radio
最新发布
11-25
在Web开发中，JavaScript可用于操作单选框，实现诸如选中状态控制、事件监听等功能。 ### 1. 获取单选框元素 在HTML中，单选框使用 `<input>` 元素，其 `type` 属性值为 `"radio"`。可以通过 `document.getElementById`、`document.getElementsByName` 或 `document.querySelectorAll` 等方法获取单选框元素。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <input type="radio" id="option1" name="options" value="option1"> <label for="option1">选项1</label><br> <input type="radio" id="option2" name="options" value="option2"> <label for="option2">选项2</label><br> <input type="radio" id="option3" name="options" value="option3"> <label for="option3">选项3</label> <script> // 通过id获取单个单选框 const option1 = document.getElementById('option1'); // 通过name获取单选框组 const radioGroup = document.getElementsByName('options'); </script> </body> </html> ``` ### 2. 检查单选框是否选中 可以通过 `checked` 属性来检查单选框是否被选中。 ```javascript // 检查option1是否被选中 if (option1.checked) { console.log('选项1被选中'); } // 遍历单选框组，找出被选中的单选框 for (let i = 0; i < radioGroup.length; i++) { if (radioGroup[i].checked) { console.log(`选中的值是: ${radioGroup[i].value}`); break; } } ``` ### 3. 设置单选框选中状态 可以通过设置 `checked` 属性为 `true` 或 `false` 来选中或取消选中单选框。 ```javascript // 选中选项2 const option2 = document.getElementById('option2'); option2.checked = true; ``` ### 4. 监听单选框的变化事件 可以使用 `addEventListener` 方法监听单选框的 `change` 事件，当单选框的选中状态发生变化时触发相应的处理函数。 ```javascript // 为每个单选框添加change事件监听器 const radioButtons = document.querySelectorAll('input[type="radio"]'); radioButtons.forEach(radio => { radio.addEventListener('change', function() { if (this.checked) { console.log(`选中的值是: ${this.value}`); } }); }); ``` ### 5. 点击文字触发单选按钮 在HTML结构设置上，可通过将 `<label>` 元素的 `for` 属性与 `<input>` 元素的 `id` 属性关联起来，实现点击文字触发单选按钮的功能。 ```html <input type="radio" id="option1" name="options" value="option1"> <label for="option1">选项1</label> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值