Meteor retrieves true / false from checkbox switchChange

Question

I have an event handler attached to checkboxes. I use the bootstrap switch http://www.bootstrap-switch.org/

I am trying to get a state value that is either true or false in a variable, so I can set its session value.

I can get a true or false value when a state changes (as shown in the rendered code). However, I would like to get this value as part of the events. Check out my variable x.

client.js

Template.myTemplate.rendered = function () { $('input[name="questions"]').bootstrapSwitch('state', true, true); $('input[name="questions"]').on('switchChange.bootstrapSwitch', function(event, state) { console.log(state); // true | false }); 

HTML:

 <template name="myTemplate"> <div class="row"> <input type="checkbox" name="questions" unchecked> Hobby? </div> <div class="row"> <input type="checkbox" name="questions" unchecked> Writer? </div> 

I am trying to get the value that is being printed in console.log(state) inside the rendered code into a variable inside my event, so I can set the session value to both true and false.

 Template.myTemplate.events({ 'click input': function(event) { var x = $(this).is(":checked").val(); Session.set("statevalue", x); console.log(Session.get("statevalue")); // this is not printing out anything } }); 

Answer 1

You must use a template instance:

 Template.myTemplate.events({ 'click input': function(event, template) { var x = template.$('input').is(":checked").val(); Session.set("statevalue", x); console.log(Session.get("statevalue")); } }); 

or possibly with 'target':

 Template.myTemplate.events({ 'click input': function(event) { var x = $(event.target).is(":checked").val(); Session.set("statevalue", x); console.log(Session.get("statevalue")); } }); 

Answer 2

I think I have a much better solution, rather than directly using jQuery:

 Template.myTemplate.events({ 'change input': function(event) { var x = event.target.checked; Session.set("statevalue", x); console.log(Session.get("statevalue")); } }); 

Make sure that I suggest you use the changes instead of clicks in the event.

Answer 3

If you define an identifier for your checkboxes, you can use

 event.target.checkboxID.checked 

with in Template-event.

this will return true or false if checked or not.

Answer 4

 Template.myTemplate.rendered = function () { $('input[name="questions"]').bootstrapSwitch('state', true, true); $('input[name="questions"]').on('switchChange.bootstrapSwitch', function(event, state) { var x = $(event.target).is(":checked"); Session.set("statevalue", x); console.log(Session.get("statevalue")); }); } 

Answer 5

 'click .task_checkbox'(event){ const target = event.target; var isChecked = $("#"+event.target.id).is(":checked").val(); console.log(isChecked); }, 

Answer 6

The event object already has all the necessary information.

 Template.myTemplate.events({ 'click input': function(event) { if (event.target.name === 'questions') { Session.set("statevalue", event.target.checked); console.log(Session.get("statevalue")); } } });