CODEWITHSUNDEEP
javascriptmeteorcheckbox
Steve Reaser
Steve Reaser

Reputation: 63

Syntax for reading checkbox state (checked / unchecked state) into a variable in Meteor

I have a form in a Meteor app with one checkbox and several text fields for each row of a dynamic table. OnClick, I'm trying to manually grab the data from each field and load up a dataObject that I'm passing to my server to handle. Everything works except for reading the value of the checkboxes.

I assume it's a silly syntax error; I've tried the syntax from other answers such as meteor retrieve true/false value from checkbox switchChange but no luck so far...

The really weird thing (to me) is that my code just halts when it hits the line where I'm trying to read the checkbox state... no error message, no log, nothing to help me debug... it just stops executing.

Here's my HTML:

<input type="checkbox" id="{{sku}}-include" checked={{isChecked}}>

(isChecked is a helper; I've verified that it's working correctly, as is the {{sku}} bit in the id attribute.)

Here's my JS:

var dataObject = {};

var fieldName = '#' + thisProduct.sku + "-displayName";
dataObject.nickname = instance.$(fieldName).val();
console.log("found displayName value: " + dataObject.nickname + " when looking for " + fieldName);

fieldName = '#' + thisProduct.sku + "-include";
dataObject.includeInReports = instance.$(fieldName).is(":checked").val();
console.log("found Include setting: " + dataObject.includeInReports + " when looking for " + fieldName);

The first set of JS lines work fine; that element is a text field. The second set of lines simply dies at the point where I try to actually read the "checked" value.

(I've tried with and without the : in :checked; for some reason every example I've found uses the colon but I'm not clear on why.)

The logging shows me that the field names are being constructed properly... the execution just stops when it hits the is("checked").val() line.

Many thanks in advance for any suggestions!

Upvotes: 1

Views: 98

Answers (2)

Shaded
Shaded

Reputation: 17836

Your is might not be working depending on your version of jQuery. Prior to 1.7 it would check things differently than in more recent versions.

From jQuery docs

Prior to jQuery 1.7, in selector strings with positional selectors such as :first, :gt(), or :even, the positional filtering is done against the jQuery object passed to .is(), not against the containing document. So for the HTML shown above, an expression such as $( "li:first" ).is( "li:last" ) returns true, but $( "li:first-child" ).is( "li:last-child" ) returns false. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.

However this means that your doing a lot more work than you need to to see if you have a checked checkbox.

Try using $(fieldName).prop("checked") instead and you should get a simple true or false based on the object you're looking at.

Upvotes: 1

Steve Reaser
Steve Reaser

Reputation: 63

Per @Shaded:

Changing .is("checked").val() to .prop("checked") works perfectly.

To restate; the correct Meteor syntax to read the checked state of a checkbox, by ID, and store in a variable is:

myVar = instance.$(fieldName).prop("checked");

Upvotes: 2

Related Questions