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


75

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


2
您这里到底是什么问题?我将您的HTML复制到一个空文件中,并选中了“否”按钮。这是IE8,FF和Opera。
克里斯蒂安·内斯马克

请参阅下面的答案(虽然有点变通办法)
Manglesh 2013年

Answers:


89

如果您有多个具有checked属性的相同名称,它将采用页面上最后一个被检查的单选。

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


6
实际上,它将检查中的最后一个收音机<form>。您可以使用相同名称的多个选中的输入,只要它们属于不同的形式即可。
布鲁诺·朗格2014年

这是我的问题。该页面有两个div,一次只能显示其中一个。两者都有一个具有相同名称的单选按钮组。在我的实例中,两者都具有checked属性,但是浏览器似乎正在从隐藏的div中选择一个(HTML中的后者)作为用于显示所选单选按钮的属性。
Phil DD

1
@BrunoLange这是我的问题。我在页面上呈现了同一HTML的多个实例-包括两个未包含在form标签内的单选按钮,其中一个具有该checked属性的单选按钮。我必须将它们包装在<form>每个实例的标签中,以检查默认的单选按钮。
MegaMatt

我需要将单选按钮及其唯一命名的组包装在自己的表单标签中。
kbo4sho88 2015年

1
这解决了我的问题,元素在迭代和动态创建时具有相同的名称!!!
Shantaram Tupe


29

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


6
将类型的输入radio放在一个formdiv以前)内解决了我的问题!我很好奇这是什么原因?
Liutong Chen

同样在这里。我真的不知道为什么需要表单标签才能可靠地进行检查... oo
jlang

我认为这不是必需的,但是使用form元素将允许命名被“作用域”化,所以选中的属性将起作用。
Charis Theo

@CharisTheo,实际上这是必要的。自己尝试。
Michael Seltenreich,

@MichaelSeltenreich我确实做到了,并且我通过更改单选按钮的名称而不将其包含在表单元素中来解决了此问题
Charis Theo

11

解决此烦人问题的终极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);

哈克...哈克...哈克...哈克...是的,我知道...因此这是一种解决方法...。


似乎您在第一个示例中的所有#radio-elements上都设置了“已检查”属性。
etoxin

由于它是一个ID选择器,因此应该只有1个匹配元素
demonkoryu

5

嘿,我也在ajax生成的页面中遇到类似的问题。.我使用FF中的Webdeveloper插件获取生成的源,并检查了表单中的所有输入,发现隐藏的div内还有另一个复选框(display:none)具有相同ID的对象,一旦我更改了第二个复选框的ID,它便开始工作。


3

只需将您的代码复制到:http : //jsfiddle.net/fY4F9/

默认情况下,不选中。您是否正在运行任何会影响单选框的JavaScript?


我知道,这很疯狂吧?不,我没有用于该地址单选按钮的任何脚本。只需对文本字段和滑块脚本进行一些验证。我现在要通过它只是为了确保..
约旦

找到了罪魁祸首,但我不知道该脚本到底是什么引起了问题
约旦(Jordan)2010年

感谢Ben,但这绝对是脚本。禁用后,我可以看到默认情况下选中的按钮。
约旦

实际上,我认为这与JQuery库有冲突
约旦(Jordan)2010年


1

您好,我想如果您将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"/>

1

我可以通过将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标签(无法真正找到解决问题的真正原因。很乐意听取一些意见!)

1

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


1

也尝试这种方式

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

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


0

您的代码正确,请尝试调试JQuery脚本以查找问题!如果您使用的是FF,则可以安装扩展来调试JS(和JQuery),称为FireBug。


-1

只需将选中的属性添加到您要默认选中的每个无线电中

尝试这个 :

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

-2

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

多数民众赞成在乔丹的文档类型。不管它仍然可以在xhtml doctype中工作;它不会验证。
本·罗维'08

我只是为了踢球而改变了它,但我知道那不是问题。验证是不错的方法,但它不能解决这一问题。
约旦2010年

5
@CFP实际上,在符合标准的XHTML(过渡,严格,HTML5等)中允许双引号或单引号。请参阅:dev.w3.org/html5/html-author/#double-quote-attr
matthewpavkov

-2

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.