Radio Buttons “Checked” Attribute Not Working
Question
The radio button does not show up as checked by default. I started off without a default choice doing some very simple js validation and it wasn't working. So I opted to just use default values until I figured that out and discovered that something weird is going on.
The markup is valid and I've tried in FF, Safari and Chrome. Nothing works.
I think it's a conflict with the jQuery library because the problem goes away when I remove the call script.
<label>Do you want to accept American Express?</label> Yes <input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No <input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />
15 answers
solution1
97 2011-04-05 18:34:27
If you have multiple of the same name with the checked attribute it will take the last checked radio on the page.
<form> <label>Do you want to accept American Express?</label> Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" /> maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" checked="checked" /> No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" /> </form>
solution2
36 2013-09-10 10:02:10
This might be it:
Is there a bug with radio buttons in jQuery 1.9.1?
In short: Don't use attr() but prop() for checking radio buttons. God I hate JS...
solution3
35 2017-01-30 19:21:00
无线电输入必须在表格内，“检查”才能工作。
solution4
11 2012-05-24 13:06:34
The ultimate JavaScript workaround to this annoying issue -
Simply wrap the jQuery command in a setTimeout . The interval can be extremely small, I use 10 milliseconds and it seems to be working great. The delay is so small that it is virtually undetectable to the end users.
setTimeout(function(){
$("#radio-element").attr('checked','checked');
},10);
This will also work with
$("#radio-element").trigger('click');-
$("#radio-element").attr('checked',true); -
$("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);
Hacky...hacky...hacky...hacky... Yes I know... hence this is a workaround....
solution5
5 2011-10-19 06:10:39
嘿，我也遇到了类似的问题，在 ajax 生成的页面中.. 我在 FF 中使用 Webdeveloper 插件获取了生成的源代码，并检查了表单中的所有输入，发现隐藏的 div(display:none) 中有另一个复选框使用相同的 ID，一旦我更改了第二个复选框的 ID，它就开始工作了.. 你也可以试试.. 让我知道结果.. 欢呼
solution6
3 2010-08-31 07:02:04
Just copied your code into: http://jsfiddle.net/fY4F9/
No is checked by default. Do you have any javascript running that would effect the radio box?
solution7
2 2016-07-08 17:24:45
The jQuery documentation provides a detailed explanation for checked property vs attribute .
Accordingly, here is another way to retrieve selected radio button value
var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();
solution8
1 2019-02-21 19:17:19
**Radio button aria-checked: true or false one at a time** $('input:radio[name=anynameofinput]').change(function() { if (this.value === 'value1') { $("#id1").attr("aria-checked","true"); $("#id2").attr("aria-checked","false"); } else if (this.value === 'value2') {; $("#id2").attr("aria-checked","true"); $("#id1").attr("aria-checked","false"); } });
solution9
1 2019-05-15 22:45:35
I could repro this by setting the name of input tag the same for two groups of input like below:
<body>
<div>
<div>
<h3>Header1</h3>
</div>
<div>
<input type="radio" name="gender" id="male_1" value="male"> Male<br>
<input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
<input type="submit" value="Submit">
</div>
</div>
<div>
<div>
<h3>Header2</h3>
</div>
<div>
<input type="radio" name="gender" id="male_2" value="male"> Male<br>
<input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
<input type="submit" value="Submit">
</div>
</div>
</body>
(To see this running, click here )
The following two solutions both fix the problem:
- Use different names for the inputs in the second group
- Use
formtag instead ofdivtag for one of the groups (can't really figure out the real reason why this would solve the problem. Would love to hear some opinions on this!)
solution10
1 2020-03-04 07:31:09
also try this way
$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");
if there is <form /> tag then ("checked", true) otherwise ("checked", "checked")
solution11
1 2012-01-06 22:22:06
hi I think if you put id attribute for the second input and give it a unique id value it will work
<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1'/>
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>
solution12
0 2010-08-31 13:28:41
Your code is right, try to debug your JQuery script to find the issue! If you're using FF you can install an extension to debug JS (and JQuery) it's called FireBug.
solution13
-1 2014-01-26 14:22:13
just add checked attribute to each radio that you want to have default checked
try this :
<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>
solution14
-2 2010-08-31 07:06:20
You're using non-standard xhtml code (values should be framed with double quotes, not single quotes)
Try this:
<form>
<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" />
No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>
solution15
-2 2020-04-12 21:43:34
Replace checked="checked" with checked={true} . Or you could even shorten it to just checked .
This is because the expected value type of the checked prop is a boolean. not a string.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.