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()函数来收集表单数据。但是，当我单击无线电输入时，我可以看到（在开发人员工具栏中）没有向该HTML节点添加“已选中”或“已选中”属性。此外，如果我输入$('input[type=radio]:checked').val()我得到了undefined但是在点击该按钮后我得到了值。

为什么会这样？

更新
我更新了单选按钮的名称，因为正如你所说他们应该有相同的名字。在我的工作区中，他们有。当我改变html标记来创建这个问题时，这个'bug'就进入了。

更新2
好吧，我知道我可以将“checked”属性添加到我的单选按钮，并且还得到它只有“active”类使得输入看起来像被按下。但！检查有关输入here或here的bootstrap网站！使用F12打开开发人员工具栏，看到当您单击任一无线电输入时，没有“已检查”属性添加到HTML源当我在保存之前点击它并且输入节点没有获得“已检查”属性时，我的网站会保存featue_enabled的值。我可以观察到的唯一变化是“活动”类转到单击的节点并离开另一个。（再次发布此表单正在运行，没有“已检查”属性！）
我认为这是一个有趣的案例，很高兴知道为什么会发生这种情况！

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 documentation

中所述

更新：正如TrueBlueAussie发现的那样，您的单选按钮会返回单个值，并且都应具有相同的名称。按钮ID可能不同，这对于在上面的jQuery语句中确切地说明您希望检查哪个单选按钮很有用

Answer 3

如果你想通过javascript

添加它

$（＆＃39;＃enabledRadioButtonId＆＃39）。丙（＆＃39;检查＆＃39;＆＃39;真＆＃39）;

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

或只是添加＆＃34;已检查＆＃34;到你想要检查它的单选按钮

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

Answer 4

因为实际上它没有被检查过它只是看起来像css使用class active来检查。你应该添加属性checked。
单选按钮的名称也应与name="feature_check"
相同试试这个

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

Answer 5

试试这个Demo

添加已选中的有效广播输入

<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" **checked**> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_disabled" value="0"> Disabled
  </label>
</div>

为什么输入型收音机不点击它就无法工作？

5 个答案: