meteor retrieve true/false value from checkbox switchChange

Question

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

I am trying to get the state value which is either true or false into a variable so I can set it to the session value.

I can get the true or false value when the state changes (as seen in the rendered code). However, I would like to get this value within events. Please check my x variable.

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 which is printed out in console.log(state) within the rendered code into a variable within my event so I can set the session to value to either true or 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

I think I have got a lot better sollution and not directly using JQuery:

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

Take care to see that I suggest you to use change instead of click in event.

Answer 2

If you define id for your checkboxes, you could use

event.target.checkboxID.checked 

with in Template-event.

this will return true or false if checked or not.

Answer 3

You should use 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 maybe 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 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 information needed.

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