Question

我有一组单选按钮，并希望按钮本身和附加文本都可以点击（以提高可用性）。

这应该非常简单，但由于某种原因，单选按钮的状态在从jQuery触发时不会更新。会发生什么是checked属性将出现在DOM中，但单选按钮似乎仍然未经检查（在视觉上）。

注意：当我从控制台运行代码时，它工作正常，但是当我的函数正常触发它时，它不会更新。此外，此代码非常适合取消检查组中的其他单选按钮...所以我很困惑为什么它不能在另一个方向上工作。

这是我的标记：

<div class="radio-input">
    <input type="radio" name="ad_category" id="cat_standard">
    <span class="inline-label">Standard</span>
</div>
<div class="radio-input">
    <input type="radio" name="ad_category" id="cat_reward">
    <span class="inline-label">Reward</span>
</div>

和jQuery：

$(".radio-input").click( function() {

  if (!$(this).children("input:radio").attr("checked")) {

    $(this).siblings(".radio-input").children("input:radio").removeAttr("checked");

    $(this).children("input:radio").attr("checked","checked");

  }
});

对于记录，在元素上调用click()会产生相同的非结果，即使它在从控制台触发时工作正常。此外，.prop和.attr都会产生相同的结果（在控制台中工作，而不是在常规流程中工作）。

Answer 1

出了什么问题：

<label><input type="radio" name="ad_category"> Standard</label>

这就是<label>标签的用途，毕竟......

无论如何，要回答实际问题，checked 属性与checked 属性之间存在差异。这种差异的一个示例是文本字段：input.value是当前值，input.getAttribute("value")保留默认值。

Answer 2

要将标签的点击附加到收音机，您可以采用两种不同的方式：

1. stick the radio inside the label tags

或

2. use a for="" attribute in the label, in which the value is equal to the ID of the radio


    <label for="x">something</label>
    <input id="x" type="text" value="my field" />

然后检查该字段是否具有属性checked="checked"

Answer 3

如果你想让DIV中的情况起作用，可能是因为你在面板中有标签以外的东西可以点击，下面的选项应该可以选择收音机。我认为你的例子中的问题是条件逻辑 - 这不应该是必需的，因为无法取消选中无线电，因此你不必担心当前的状态。如果选中，它将保持检查状态。此外，您不需要处理兄弟姐妹，因为浏览器应该为您处理（至少它适用于Firefox）。

$('.radio-input').click(function () {
  $(this).children('input:radio').attr('checked', 'checked');
});

请注意，这不会触发更改事件，只会设置要检查的特定无线电，如上所述，浏览器将取消选中当前选定的无线电。

无法以编程方式＆＃34;检查＆＃34;使用jQuery的单选按钮

3 个答案: