单选按钮“已检查”属性不起作用

Question

The radio button does not show up as checked by default.默认情况下，单选按钮不会显示为checked 。 I started off without a default choice doing some very simple js validation and it wasn't working.我开始时没有默认选择，做了一些非常简单的 js 验证，但它不起作用。 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.标记是有效的，我已经在 FF、Safari 和 Chrome 中尝试过。 Nothing works.什么都行不通。

I think it's a conflict with the jQuery library because the problem goes away when I remove the call script.我认为这与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" />

Answer 1

If you have multiple of the same name with the checked attribute it will take the last checked radio on the page.如果您有多个同名的 check 属性，它将采用页面上最后一个选中的收音机。

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

Answer 2

This might be it:这可能是：

Is there a bug with radio buttons in jQuery 1.9.1? jQuery 1.9.1 中的单选按钮是否存在错误？

In short: Don't use attr() but prop() for checking radio buttons.简而言之：不要使用 attr() 而是使用 prop() 来检查单选按钮。 God I hate JS...天啊，我讨厌JS...

Answer 3

无线电输入必须在表格内，“检查”才能工作。

Answer 4

The ultimate JavaScript workaround to this annoying issue -解决这个烦人问题的最终 JavaScript 解决方法 -

Simply wrap the jQuery command in a setTimeout .只需将 jQuery 命令包装在setTimeout 。 The interval can be extremely small, I use 10 milliseconds and it seems to be working great.间隔可以非常小，我使用10毫秒，它似乎工作得很好。 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.... Hacky...hacky...hacky...hacky...是的，我知道...因此这是一个解决方法....

Answer 5

嘿，我也遇到了类似的问题，在 ajax 生成的页面中.. 我在 FF 中使用 Webdeveloper 插件获取了生成的源代码，并检查了表单中的所有输入，发现隐藏的 div(display:none) 中有另一个复选框使用相同的 ID，一旦我更改了第二个复选框的 ID，它就开始工作了.. 你也可以试试.. 让我知道结果.. 欢呼

Answer 6

Just copied your code into: http://jsfiddle.net/fY4F9/刚刚将您的代码复制到： http : //jsfiddle.net/fY4F9/

No is checked by default.否默认选中。 Do you have any javascript running that would effect the radio box?您是否正在运行任何会影响单选框的 javascript？

Answer 7

The jQuery documentation provides a detailed explanation for checked property vs attribute . jQuery 文档提供了关于checked属性与属性的详细解释。

Accordingly, here is another way to retrieve selected radio button value因此，这是另一种检索选定单选按钮值的方法

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();

Answer 8

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

Answer 9

I could repro this by setting the name of input tag the same for two groups of input like below:我可以通过为两组输入设置相同的input标签名称来重现这一点，如下所示：

<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 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!)对其中一个组使用form标签而不是div标签（无法真正弄清楚为什么这会解决问题的真正原因。很想听听对此的一些意见！）

Answer 10

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")如果有<form />标签那么("checked", true)否则("checked", "checked")

Answer 11

hi I think if you put id attribute for the second input and give it a unique id value it will work嗨，我想如果你为第二个输入设置 id 属性并给它一个唯一的 id 值，它将起作用

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

Answer 12

Your code is right, try to debug your JQuery script to find the issue!您的代码是正确的，尝试调试您的 JQuery 脚本以查找问题！ If you're using FF you can install an extension to debug JS (and JQuery) it's called FireBug.如果您使用 FF，您可以安装一个扩展来调试 JS（和 JQuery），它被称为 FireBug。

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

Answer 14

You're using non-standard xhtml code (values should be framed with double quotes, not single quotes)您使用的是非标准的 xhtml 代码（值应该用双引号框起来，而不是单引号）

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>

Answer 15

Replace checked="checked" with checked={true} .将checked="checked"替换为checked={true} 。 Or you could even shorten it to just checked .或者您甚至可以将其缩短为仅checked 。

This is because the expected value type of the checked prop is a boolean.这是因为被checked prop 的期望值类型是一个布尔值。 not a string.不是字符串。

单选按钮“已检查”属性不起作用

问题描述

15 个解决方案

解决方案1
97 2011-04-05 18:34:27

解决方案2
36 2013-09-10 10:02:10

解决方案3
35 2017-01-30 19:21:00

解决方案4
11 2012-05-24 13:06:34

解决方案5
5 2011-10-19 06:10:39

解决方案6
3 2010-08-31 07:02:04

解决方案7
2 2016-07-08 17:24:45

解决方案8
1 2019-02-21 19:17:19

解决方案9
1 2019-05-15 22:45:35

解决方案10
1 2020-03-04 07:31:09

解决方案11
1 2012-01-06 22:22:06

解决方案12
0 2010-08-31 13:28:41

解决方案13
-1 2014-01-26 14:22:13

解决方案14
-2 2010-08-31 07:06:20

解决方案15
-2 2020-04-12 21:43:34

单选按钮“已检查”属性不起作用

问题描述

15 个解决方案

解决方案1 97 2011-04-05 18:34:27

解决方案2 36 2013-09-10 10:02:10

解决方案3 35 2017-01-30 19:21:00

解决方案4 11 2012-05-24 13:06:34

解决方案5 5 2011-10-19 06:10:39

解决方案6 3 2010-08-31 07:02:04

解决方案7 2 2016-07-08 17:24:45

解决方案8 1 2019-02-21 19:17:19

解决方案9 1 2019-05-15 22:45:35

解决方案10 1 2020-03-04 07:31:09

解决方案11 1 2012-01-06 22:22:06

解决方案12 0 2010-08-31 13:28:41

解决方案13 -1 2014-01-26 14:22:13

解决方案14 -2 2010-08-31 07:06:20

解决方案15 -2 2020-04-12 21:43:34

解决方案1
97 2011-04-05 18:34:27

解决方案2
36 2013-09-10 10:02:10

解决方案3
35 2017-01-30 19:21:00

解决方案4
11 2012-05-24 13:06:34

解决方案5
5 2011-10-19 06:10:39

解决方案6
3 2010-08-31 07:02:04

解决方案7
2 2016-07-08 17:24:45

解决方案8
1 2019-02-21 19:17:19

解决方案9
1 2019-05-15 22:45:35

解决方案10
1 2020-03-04 07:31:09

解决方案11
1 2012-01-06 22:22:06

解决方案12
0 2010-08-31 13:28:41

解决方案13
-1 2014-01-26 14:22:13

解决方案14
-2 2010-08-31 07:06:20

解决方案15
-2 2020-04-12 21:43:34