流星中活动单选按钮返回的值答案

【问题标题】：Value returned by an active radio button in meteor流星中活动单选按钮返回的值
【发布时间】：2014-07-28 16:00:29
【问题描述】：

当我关闭模态表单时，我正在努力获取所选单选按钮（在本例中为 bootstrap 3 按钮组）的值。

我得到了正确的按钮，但我似乎能够返回的唯一值是 .text() ，它周围有一堆空间。我可以使用这个，但我想肯定有更好的方法。

html是

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-warning">
    <input type="radio" name="options" id="requester" value="requester">Requester
  </label>
  <label class="btn btn-warning active">
    <input type="radio" name="options" id="packer" value="packer">Packer
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="admin" value="admin">Admin
  </label>
</div>

使用我正在使用的 js，响应“完成”按钮

Template.addUserModalInner.events({
  'click .btn-primary': function(event, template) {
    console.log("Done clicked");
    var role = $('.btn-group > .btn.active');
    console.log(role);
    console.log(role.text());

console.log(role) 显示我每次都选择了正确的按钮，但我真正想要的是值。我已经尝试过 .val()、.value、.id 但对这些都不满意。

我在哪里可以找到我可以访问的属性列表（作为一个更普遍的问题），有没有比 .text() 更好的方法来获取选定的按钮？

Ta 彼得

【问题讨论】：

标签： jquery meteor

【解决方案1】：

这里的问题是单击事件以及您的选择器是在 <label> 元素上执行的，而不是在 <input> 元素上执行的。标签包含文本但没有值，这就是代码响应的原因。您想要标签的子输入的值。

您可以使用自己命名的策略以及其他策略来实现这一点，例如：

var role = $('.btn-group > .btn.active > input').val();

或者，将选择器限制为 addUserModalInner 模板（上面的选择器正在遍历整个 DOM）：

var role = template.find('.btn-group > .btn.active > input').value;

最后，查找每个 DOM 元素可以访问的属性列表的最简单方法是在浏览器的开发人员工具中 - 在 Chrome 中的 properties 选项卡下（我想它在其他浏览器中类似）标签元素将列出可用于访问上述子输入的其他属性，例如children 或firstElementChild。

【讨论】：