jquery - 无法使用 jQuery 以编程方式 "check"单选按钮

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 属性(property)。这种差异的一个例子是文本字段: input.value是当前值，input.getAttribute("value")保持默认值。