How to select Multi Check Boxs in HTML using Meteor?

I need to know about selecting multiple checkboxes in html using meteor.I made a sample. In this example, select more than one check box. How to get selected data and how to store data in an array. Can you see the code below and suggest me what to do?

Storing parts in an array, suppose arrayname = Bike, car, computer (these are selected items)

HTML code:

<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 Code:

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
     }

  });
+4
source share
1 answer

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);

 }
});

[ "", "" ], "" "". . .

+9

Source: https://habr.com/ru/post/1535615/


All Articles