Bootstrap 3 单选按钮

Posted 2023-03-05

【中文标题】Bootstrap 3 单选按钮

【英文标题】：Bootstrap 3 radio button

【发布时间】：2013-08-02 21:57:21

【问题描述】：

我正在使用 twitter bootstrap 3 及其新的 radio buttons，但似乎无法检查哪个按钮。

我的按钮是这样的：

    <div class="form-group">
      <label for="inputLogType" class="col-lg-2 control-label">Log type</label>
      <div class="col-lg-10">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="radio" name="inputLogType" id="splunk">Splunk
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="inputLogType" id="pig">PIG
          </label>
        </div>          
      </div>            
    </div>

我可以通过$(".btn-group").click() 获取是否单击了任一按钮，但在其中我无法获取单击了哪个按钮。我将通过 jquery $("input[name='inputLogType']") 获得 2 个按钮，其中一个将具有 checked:true 属性。但是，当我执行$("input[name='inputLogType']:checked") 时，什么也没有出现。

有谁知道怎么回事？

【问题讨论】：

所以如果我这样做$("input[name='inputLogType']")[i].checked 就可以了，但是有人知道为什么我不能像上面最初显示的那样选择吗？

您是否尝试在点击回调中访问:checked 值？如果是这样，很可能该属性尚未应用。你可以使用$(event.target).find('input');

那个选择器对我有用：jsfiddle.net/QMsQU/1（使用 chrome）。您使用什么 javascript 来显示 $("input[name='inputLogType']:checked") jQuery 对象中的内容？

@Joe_G 我只是在使用console.log。奇怪的是它在 jsfiddle 中有效，但在我的应用程序中无效。您认为这可能与 bootstrap 3 有关吗？

嗯，在我的脚本中它只显示了最后一次点击的 - 所以如果我第一次点击“猪”，它什么也没选择，当我点击“splunk”时，它显示猪是选择，等等。知道为什么：S？

【参考方案1】：

您是否尝试访问点击回调中的:checked 值？如果是这样，很可能该属性尚未应用。

您可以使用$(event.target).find('input'); 选择目标单选按钮。

【讨论】：

我不得不使用 $(event.target).find('input')[0];获取 DOM 元素（而不是 jQuery 元素）。