在 Meteor 中获取 twitter bootstrap 单选按钮组的值

Posted

技术标签:

【中文标题】在 Meteor 中获取 twitter bootstrap 单选按钮组的值【英文标题】:Get value of twitter bootstrap radio button group in Meteor 【发布时间】:2013-08-08 18:50:41 【问题描述】:

我知道有很多关于此的主题,但不幸的是,我找不到可行的解决方案。所以这是我的问题。

我有一个流星模板,其中包含以下按钮组:

<template name="test">
 <form class="form-horizontal" id="search_form">
 <fieldset>
  <div class="form-actions">

    <div class="btn-group" data-toggle="buttons-radio" id="my_radiogroup">
      <button type="radio" class="btn my_button" name="knop" value="1">OR</button>
      <button type="radio" class="btn my_button" name="knop" value="2">AND</button>
    </div>

   </div>
  </fieldset>
 </form>
</template>

现在我想获取所选单选按钮的值(OR 或 AND)。因此,我尝试了以下解决方案,基于我在网络和 Stack 上可以找到的内容:

第一个解决方案:

Template.test.events(
 'click #my_radiogroup' : function(e,t) 
 var element = t.find('button:radio[name=knop]:checked'); 
 alert($(element).val());

);

第二种解决方案(基于 twitter bootstrap 中的活动类):

Template.test.events(
 'click #my_radiogroup' : function(e,t) 
 var element = t.find("#my_button.active").value;
 alert(element);

);

我已经在我的模板中尝试了第三种解决方案:

<input type="hidden" id="alignment" value="" />  
<div class="btn-group alignment" data-toggle="buttons-radio">
 <button type="button" class="btn">OR</button>
 <button type="button" class="btn">AND</button>
</div>

在我的 *.js 文件中使用此代码:

Template.test.events(
 'click #alignment.btn' : function(e,t) 
 var element = val(this.text());
 alert(element);
 return false;

);

但是,这些解决方案都不起作用。谁想要我如何获取所选单选按钮的值?

谢谢。

【问题讨论】:

【参考方案1】:

在您的最后一个示例中,您尝试使用 id #alignment 和 .btn 类来定位一个元素,它们不存在。

另外我不知道你从哪里得到“t”,因为只有一个event map 被传递给event(“e”)。

此代码应该可以工作(但未经测试)。

Template.test.events(
  'click .btn' : function(e) 
    var clickedButton = e.currentTarget;
    alert( $(clickedButton).val() );
  
);

【讨论】:

@Kristoffer K :“t”是 Meteor 模板实例,它也被传递给事件处理程序。 @saimeunt :它不在文档中?还是我错过了什么?谢谢 文档:“处理程序函数接收两个参数:事件,一个包含事件信息的对象,以及模板,一个模板实例,用于定义处理程序的模板。” 我有一个补充问题。如果我想显示通过按下另一个按钮(不是单选按钮本身)来显示按下哪个单选按钮的警报,该怎么办?在那种情况下,我不能使用 e.currentTarget 因为 currentTarget 不是单选按钮之一。 @Quantum 只需选择使用 $('.btn').is(':checked') 选择(单击)的单选按钮。使用比 .btn 更具体的类可能会更好(我怀疑它来自 TW 引导程序?),但无论如何,这样的东西应该可以工作。【参考方案2】:

你可以试试这个..

alert($('.btn-group > .btn.active').attr("value"));

【讨论】:

以上是关于在 Meteor 中获取 twitter bootstrap 单选按钮组的值的主要内容,如果未能解决你的问题,请参考以下文章

在 Meteor 中获取集合的索引列表

在 Meteor 的 onCreated 中获取模板变量

在 Meteor Web 应用程序中启用对讲推送通知

Meteor App在表单中获取textarea的值

如何在每个循环的 Meteor 模板中获取数组的索引?

Meteor - 如何在 MongoDB 集合中查找/获取对象并使用方法将其推送到另一个集合中?