单选按钮“检查”属性无效

默认情况下，单选按钮不显示为 checked。我开始没有一个默认的选择做一些非常简单的 js 验证，它不工作。所以我选择只使用默认值，直到我弄明白了这一点，并发现一些奇怪的事情正在发生。

这个标记是有效的，我在 FF，Safari 和 Chrome 中都试过了，没有一个是有效的。

我认为这与 jQuery库有冲突，因为当我删除调用脚本时问题就消失了。

<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" />

241109 次浏览
小开

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?

小开

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>
小开

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.

小开

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>

小开

Hey I was also facing similar problem, in an ajax generated page.. I took generated source using Webdeveloper pluggin in FF, and checked all the inputs in the form and found out that there was another checkbox inside a hidden div(display:none) with same ID, Once I changed the id of second checkbox, it started working.. You can also try that.. and let me know the result.. cheers

小开

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"/>
小开

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....

小开

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...

小开

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/>
小开

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();
小开

Radio inputs must be inside of a form for 'checked' to work.

小开 

**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");
}
});

小开

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:

  1. Use different names for the inputs in the second group
  2. Use form tag instead of div tag 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!)
小开

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")

小开

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.


提交答案