如何使用Meteor选择HTML中的多重复选框?

时间:2014-04-08 19:02:30

标签: javascript html meteor

我需要知道如何使用meteor在html中选择多个复选框。我做了一个示例。在此示例中选择了多个复选框。如何获取所选数据以及如何将数据存储在数组中。可以请您看下面的代码并建议我做什么?

将数据存储在数组中,如假设arrayname = Bike,car,Computer(这些是选定的项目)

HTML代码:

<form id="cb-form" action="action">
<input type="checkbox" name="owns" value="Bike">Bike<br/>
<input type="checkbox" name="owns" value="Car">car<br/>
<input type="checkbox" name="owns" value="Refridgerator">Refridgerator<br/>
<input type="checkbox" name="owns" value="Mobile">Mobile<br/>
<input type="checkbox" name="owns" value="Tablet">Tablet<br/>
<input type="checkbox" name="owns" value="Computer">Computer<br/>
<input type="submit"  value="send" />
</form>

JS代码:

Template.login.events

  ({

    'submit #cb-form' : function (e,t)

    {

      // template data, if any, is available in 'this'

      if (typeof console !== 'undefined')

        console.log("You pressed LOGIN Button");

        e.preventDefault();

       //retrieve the input field values

         //here write get multiple check boxes data logic same as above scenario
     }

  });

1 个答案:

答案 0 :(得分:10)

HTML:

<template name="login">
  <form id="cb-form" action="action">
   <input type="checkbox" name="owns" value="Bike">Bike<br/>
   <input type="checkbox" name="owns" value="Car">car<br/>
   <input type="checkbox" name="owns" value="Refridgerator">Refridgerator<br/>
   <input type="checkbox" name="owns" value="Mobile">Mobile<br/>
   <input type="checkbox" name="owns" value="Tablet">Tablet<br/>
   <input type="checkbox" name="owns" value="Computer">Computer<br/>
   <input type="submit"  value="send" />
 </form>  
</template>

JS:

Template.login.events({
 'submit #cb-form' : function (event, template) {
   event.preventDefault();

   var selected = template.findAll( "input[type=checkbox]:checked");

   var array = _.map(selected, function(item) {
     return item.defaultValue;
   });

   console.log(array);

 }
});

如果选择了Car and Refridge,则输出[“Car”,“Refridgerator”]。它很容易使用下划线。检查下划线文档以便进一步阅读。