当前位置：文江博客话题详情

HTML forms radio-button

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

发布于 2024-09-16 11:33:21 字数 604 浏览 15 评论 0原文

默认情况下，单选按钮不会显示为已选中。我一开始没有默认选择，做了一些非常简单的 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" />

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

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

I think it's a conflict with the jQuery library because the problem goes away when I remove the call script.

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（15）

任性一次 2024-09-23 11:33:22

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

回复收藏 0 原文

灰色世界里的红玫瑰 2024-09-23 11:33:22

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

默认情况下选中“否”。您运行的 JavaScript 是否会影响单选框？

回复收藏 0 原文

染柒℉ 2024-09-23 11:33:22

jQuery 文档提供了针对checked 属性与属性。

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

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

The jQuery documentation provides a detailed explanation for checked property vs attribute.

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

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

回复收藏 0 原文

逐鹿 2024-09-23 11:33:22

我可以通过将两组输入的 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>

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

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

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

I could repro this by setting the name of input tag the same for two groups of input like below:

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

回复收藏 0 原文

情话已封尘 2024-09-23 11:33:22

你好，我认为如果你为第二个输入添加 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"/>

hi I think if you put id attribute for the second input and give it a unique id value it will work

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

回复收藏 0 原文

悲欢浪云 2024-09-23 11:33:22

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

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

回复收藏 0 原文

ゞ花落谁相伴 2024-09-23 11:33:22

则也尝试这种方式

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

如果有

标记， ("checked", true) 否则 ("checked", "checked")< /代码>

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

回复收藏 0 原文

感情旳空白 2024-09-23 11:33:22

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

回复收藏 0 原文

一个人练习一个人 2024-09-23 11:33:22

您正在使用非标准 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>

You're using non-standard xhtml code (values should be framed with double quotes, not single quotes)

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>

回复收藏 0 原文

走过海棠暮 2024-09-23 11:33:22

只需向您想要默认检查的每个无线电添加检查属性

试试这个：

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

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

回复收藏 0 原文

窗影残 2024-09-23 11:33:22

将 checked="checked" 替换为 checked={true}。或者您甚至可以将其缩短为“已检查”。

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

回复收藏 0 原文

牵你手 2024-09-23 11:33:21

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

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

If you have multiple of the same name with the checked attribute it will take the last checked radio on the page.

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

回复收藏 0 原文

離人涙 2024-09-23 11:33:21

无线电输入必须位于表单内才能“检查”工作。

回复收藏 0 原文

提笔书几行 2024-09-23 11:33:21

可能是这样：

是否有jQuery 1.9.1 中的单选按钮有 bug？

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

回复收藏 0 原文

胡大本事 2024-09-23 11:33:21

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

The ultimate JavaScript workaround to this annoying issue -

Simply wrap the jQuery command in a setTimeout. The interval can be extremely small, I use 10 milliseconds and it seems to be working great. 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....

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

491 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lanyue

文章 0 评论 0

海螺姑娘

文章 0 评论 0

Demos

文章 0 评论 0

亢龙有悔

文章 0 评论 0

海未深

文章 0 评论 0

浅忆流年

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文