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

时间:2014-06-07 13:39:44

标签: jquery meteor

当我关闭模态表单时,我很难获得所选单选按钮(在本例中为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一起响应&#34;完成&#34;按钮

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(角色)显示我每次都选择了正确的按钮,但我真正想要的是价值。我已经尝试过.val(),。value,.id,但没有任何喜悦。

我在哪里可以找到我可以访问的属性列表(作为更一般的问题),是否有比.text()更好的方法来获取所选按钮?

钽 彼得

1 个答案:

答案 0 :(得分:2)

此处的问题是,点击事件以及您的选择器正在<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标签下(我想它在其他方面类似)浏览器)label元素将列出可用于访问上述子输入的其他属性,例如childrenfirstElementChild