单选按钮“选中”属性不起作用

Posted 2023-03-05

技术标签:

【中文标题】单选按钮“选中”属性不起作用【英文标题】：Radio Buttons "Checked" Attribute Not Working 【发布时间】：2011-04-06 02:52:39 【问题描述】：

默认情况下，单选按钮不显示为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" />

【问题讨论】：

您的问题到底是什么？我将您的 html 复制到一个空文件中，并选中“否”按钮。这是 IE8、FF 和 Opera。在下面查看答案（虽然是一种解决方法） 【参考方案1】：

如果您有多个具有选中属性的相同名称，它将采用页面上最后一个选中的单选。

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

【讨论】：

它实际上会检查<form> 中的最后一个收音机。您可以有多个同名的已检查输入，只要它们属于不同的表单即可。这是我的问题。该页面有两个 div，一次只显示一个。两者都有一个同名的单选按钮组。在我的例子中，两者都有选中的属性，但浏览器似乎从隐藏的 div（HTML 中的后一个）中选择一个作为用于显示所选单选按钮的属性。 @BrunoLange 这是我的问题。我在页面上呈现相同 HTML 的多个实例 - 其中包括两个未包含在表单标记内的单选按钮，一个单选按钮具有 checked 属性。我必须将它们包装在每个实例的 <form> 标记中才能选中默认单选按钮。我需要将单选按钮及其唯一命名的组包裹在自己的表单标签中。这解决了我的问题，元素在迭代和动态创建时具有相同的名称！！！【参考方案2】：

单选输入必须在表单内，“已检查”才能工作。

【讨论】：

将radio 类型的输入放入form（之前是div）解决了我的问题！我很好奇这是什么原因？这里也一样。我真的不知道为什么需要一个表单标签才能使检查可靠地工作...... o.o 我不认为这是必要的，但使用表单元素将允许命名为“范围”我猜这样选中的属性将起作用。 @CharisTheo，事实上，这是必要的。自己试试吧。 @MichaelSeltenreich 我确实做到了，我已经通过更改单选按钮的名称而不将它们包含在表单元素中解决了这个问题【参考方案3】：

可能是这样的：

Is there a bug with radio buttons in jQuery 1.9.1?

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

【讨论】：

这可能没有回答 OP 的问题，但它回答了我的问题昨天刚发现同样的问题。【参考方案4】：

解决这个烦人问题的终极 javascript 解决方法 -

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

setTimeout(function()
  $("#radio-element").attr('checked','checked');
,10);

这也适用于

$("#radio-element").trigger('click'); $("#radio-element").attr('checked',true); $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky...hacky...hacky...hacky...是的，我知道...因此这是一种解决方法...。

【讨论】：

您似乎在第一个示例中为所有#radio-elements 设置了“已检查”属性。因为它是一个id选择器，所以应该只有1个匹配元素【参考方案5】：

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

【讨论】：

【参考方案6】：

刚刚将您的代码复制到：http://jsfiddle.net/fY4F9/

默认选中否。您是否运行了任何会影响单选框的 javascript？

【讨论】：

我知道，这很疯狂吧？不，我没有任何脚本去地址单选按钮。只是对文本字段和滑块脚本进行了一些验证。我现在要通过它只是为了确保.. 找到了罪魁祸首，但我不知道该脚本中究竟是什么导致了问题谢谢 Ben，但这绝对是脚本。禁用时，我可以看到默认选中的按钮。其实我觉得是和JQuery库冲突【参考方案7】：

jQuery 文档提供了a detailed explanation for checked property vs attribute。

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

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

【讨论】：

【参考方案8】：

您好，我认为如果您将 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"/>

【讨论】：

【参考方案9】：

我可以通过将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>

（要查看此运行情况，请单击here）

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

form

div

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

也试试这个方法

$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");

如果有<form />标签则("checked", true)否则("checked", "checked")

【讨论】：

【参考方案12】：

您的代码是正确的，尝试调试您的 JQuery 脚本以找出问题所在！如果你使用的是 FF，你可以安装一个扩展来调试 JS（和 JQuery），它叫做 FireBug。

【讨论】：

【参考方案13】：

您使用的是非标准的 xhtml 代码（值应该用双引号括起来，而不是单引号）

试试这个：

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

【讨论】：

这取决于 Jordan 的文档类型。不管怎样，它仍然可以在 xhtml doctype 中工作；但是它不会验证。我改变它只是为了好玩，但我知道这不是问题。验证很好，但它不能解决这个问题。 @CFP 实际上，在符合标准的 XHTML（transitional、strict、HTML5 等）中允许使用双引号或单引号。见：dev.w3.org/html5/html-author/#double-quote-attr【参考方案14】：

只需将选中的属性添加到您希望默认选中的每个收音机

试试这个：

<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>

【讨论】：

【参考方案15】：

将checked="checked" 替换为checked=true。或者您甚至可以将其缩短为 checked。

这是因为 checked 属性的期望值类型是布尔值。不是字符串。

【讨论】：

以上是关于单选按钮“选中”属性不起作用的主要内容，如果未能解决你的问题，请参考以下文章

默认选中的单选输入在 Laravel 中使用 Bootstrap 语法不起作用

.click() 在单选按钮上不起作用

在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用

单选按钮验证不起作用 jquery

UITableview 内的单选按钮不起作用

单选按钮在 jquery innerhtml 中不起作用