Question

我在HTML中有以下结构：

<div id="RadioGroup" class="btn-group">
  <label class="btn btn-default">
    <input id="RadioGroupYes" type="radio" class="toggle" value="true" />Yes
  </label>
  <label class="btn btn-default active">
    <input id="RadioGroupNull" type="radio" class="toggle" checked="checked" value="null" />-
  </label>
  <label class="btn btn-default">
    <input id="RadioGroupNo" type="radio" class="toggle" value="false" />No
  </label>
</div>

我有一个按钮，意味着将所有内容重置为默认值，除了$('#RadioGroupNull').prop('checked', true);行外，它都有效。控制台中没有错误，单击此按钮时无效。

在更改回默认选中的单选按钮时，我缺少什么？

JQuery代码：

$("#button").click(function() {
    $('#RadioGroupNull').prop('checked', true);
});

Answer 1

您需要为三个按钮添加名称属性，如下所示：

$("#button").click(function() {
    $('#RadioGroupNull').prop('checked', true);
});

然后当您单击一个按钮时，其他按钮将被清除。使用name属性，您显示的单击处理程序（加上右括号和分号）将把它设置回默认的null按钮：

clr-degree

Answer 2

我已经解决了我的问题：

<div id="RadioGroup" class="btn-group">
  <label id="RadioGroupYes" class="btn btn-default">
    <input type="radio" class="toggle" value="true" />Yes
  </label>
  <label id="RadioGroupNull" class="btn btn-default active">
    <input type="radio" class="toggle" checked="checked" value="null" />-
  </label>
  <label id="RadioGroupNo" class="btn btn-default">
    <input type="radio" class="toggle" value="false" />No
  </label>
</div>

正如您所看到的，我将所有ID从输入移动到它们周围的标签。

然后我在重置按钮上使用了以下JQuery函数：

$('#RadioGroupYes').removeClass('active');
$('#RadioGroupNo').removeClass('active');
$('#RadioGroupNull').addClass('active');

这一切都完美地适用于表单输入提交。全部测试过。

Bootstrap jQuery - 将单选按钮设置回默认选中状态

2 个答案: