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

Radio Buttons "Checked" Attribute Not Working

提问by Jordan

The radio button does not show up as checkedby 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.

checked默认情况下，单选按钮不显示。我开始时没有默认选择，做了一些非常简单的 js 验证，但它不起作用。所以我选择只使用默认值，直到我弄清楚并发现发生了一些奇怪的事情。

The markup is valid and I've tried in FF, Safari and Chrome. Nothing works.

标记是有效的，我已经在 FF、Safari 和 Chrome 中尝试过。什么都行不通。

I think it's a conflict with the jQuerylibrary 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" />

回答by jeeves

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>

回答by Martin T.

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. God I hate JS...

简而言之：不要使用 attr() 而是使用 prop() 来检查单选按钮。天啊，我讨厌JS...

回答by Michael Seltenreich

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

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

回答by Lix

The ultimate JavaScript workaround to this annoying issue -

解决这个烦人问题的最终 JavaScript 解决方法 -

Simply wrap the jQuery command in a setTimeout. The interval can be extremely small, I use 10milliseconds and it seems to be working great. The delay is so small that it is virtually undetectable to the end users.

只需将 jQuery 命令包装在setTimeout. 间隔可以非常小，我使用10毫秒，它似乎工作得很好。延迟非常小，以至于最终用户几乎无法察觉。

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

• $("#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...是的，我知道...因此这是一个解决方法....

回答by Codemator

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

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

回答by Ben Rowe

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？

回答by Sudhir

The jQuery documentation provides a detailed explanation for checkedproperty vs attribute.

jQuery 文档提供了对checkedproperty 与 attribute的详细解释。

Accordingly, here is another way to retrieve selected radio button value

因此，这是另一种检索选定单选按钮值的方法

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

回答by user11097803

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

回答by Liutong Chen

I could repro this by setting the name of inputtag 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:

以下两种解决方案都可以解决问题：

1. Use different names for the inputs in the second group
2. Use formtag instead of divtag 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!)

1. 为第二组中的输入使用不同的名称
2. 对其中一个组使用form标签而不是div标签（无法真正弄清楚为什么这会解决问题的真正原因。很想听听对此的一些意见！）

回答by mentes

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