为什么不点击输入类型的收音机就不能工作？

Question

我正在使用Bootstrap，我有一个单选按钮组，它的工作方式很奇怪。下面是标记：

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_enabled" value="1"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_enabled" value="0"> Disabled
  </label>
</div>

因此，如您所见，“启用”按钮已在页面上加载。如果我不点击“已启用”按钮，并提交表单变量feature_enabled不存在，但如果我这样做，它是。我使用jQuery的serialize()函数来收集表单数据。但是，当我单击一个无线电输入时，我可以看到(在Developer工具栏中)没有向该HTML节点添加“选中”或“选定”属性。此外，如果输入$('input[type=radio]:checked').val()，我得到了undefined，但单击该按钮后，得到了值。

为什么会发生这种事？

更新

我更新了单选按钮的名称，因为正如您所说的，它们应该有相同的名称。在我的工作空间里。当我修改html标记来创建这个问题时，这个'bug‘就出现了。

更新2

好的，我知道我可以在我的单选按钮中添加"checked“属性，而且只有"active”类才能使输入看起来像按下了它。但!检查引导站点有关输入这里或这里！使用F12打开developer工具栏，并看到当您单击任一无线电输入时，没有向HTML添加"checked“属性。

当我在保存和输入节点未被“选中”属性之前单击它时，我的站点保存了featue_enabled的值。我能观察到的唯一变化是“active”类转到单击的节点并离开另一个节点。(同样，在没有“选中”属性的情况下，发布此表单也是有效的！)

我认为这是一个有趣的案例，很高兴知道为什么会发生这种情况！

Answer 1

尝尝这个

$('input[type=radio]').attr('checked','true');

Answer 2

仅仅因为标签上有一个类active并不意味着您已经启用了它。需要选择输入(单选按钮的情况下是checked，因为它是一种复选框)

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature" value="1" checked="checked"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature" value="0"> Disabled
  </label>
</div>

为了显式地响应在其他答案和注释中声明的内容，您可以通过以下方法在jQuery中设置选中的值：

$('input[type=radio]').prop('checked','true');

注意属性(.prop)和属性(.attr)之间的区别，如jQuery文档中所解释的

更新：和TrueBlueAussie一样，您的单选按钮返回一个值，并且应该都有相同的名称。然而，按钮ids可能是不同的，这对于在上面的jQuery语句中准确地声明希望签入哪个单选按钮很有用。

Answer 3

如果您想通过javascript添加这个

$(#enabledRadioButtonId).prop(“选中”，“真”)；

和enabledRadioButtonId作为要启用的单选按钮的id。

或者将“选中”添加到您希望检查的单选按钮中。

<input type="radio" class="form-control" name="feature_enabled" value="1" checked>