堆栈内存溢出
  繁体   English   中英

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

[英]Radio Buttons “Checked” Attribute Not Working

 原文  2010-08-31 06:57:08  5   15    html/ forms/ radio-button

问题描述

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

15 个解决方案

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

如果您有多个同名的 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>

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

这可能是：

jQuery 1.9.1 中的单选按钮是否存在错误？

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

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

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

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

解决这个烦人问题的最终 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...是的，我知道...因此这是一个解决方法....

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

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

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

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

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

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

jQuery 文档提供了关于checked属性与属性的详细解释。

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

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

解决方案8
 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"); } });

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

我可以通过为两组输入设置相同的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>

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

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

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

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

也试试这个方法

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

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

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

嗨，我想如果你为第二个输入设置 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"/>

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

您的代码是正确的，尝试调试您的 JQuery 脚本以查找问题！ 如果您使用 FF，您可以安装一个扩展来调试 JS（和 JQuery），它被称为 FireBug。

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

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

试试这个：

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

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

您使用的是非标准的 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>

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

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

这是因为被checked prop 的期望值类型是一个布尔值。 不是字符串。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 选中的属性在单选按钮中不起作用 带有html属性“ checked”的不可检查的单选按钮 VueJS 2 v-for 表单输入单选按钮检查属性不起作用 在多模式弹出窗口中更改默认单选按钮选中属性 如何重置除具有选中属性的单选按钮之外的所有单选按钮？ 同时检查单选按钮 默认情况下选中单选按钮 单选按钮未显示为选中状态 检查数据绑定不适用于淘汰赛 js 中的单选按钮 为什么：checked 不适用于我的单选按钮？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM