jQuery .data() does not return boolean value; why?

Question

I'm very unexperienced jQuery programmer unable to find a bug in my trivial script. Could you please help?

I want to emphasize a checkbox if its state differs from the initial value. That initial value is stored as data-init attribute. The generated html for checked and unchecked input looks like this:

<td><input checked data-init id="controls-0-modeU" name="controls-0-modeU" type="checkbox" value="y"></td>

<td><input id="controls-1-modeU" name="controls-1-modeU" type="checkbox" value="y"></td>

In the accepted answer here: Retrieve boolean data from data attribute in jquery there is: "The jQuery .data() method is smart about recognizing boolean and numeric values and converts them into their native type". That is what I want.

My script begins with:

$(document).ready(function(){
        $("td input:checkbox").change(function(){
            var $init = $(this).data("init")

But the value of $init is either undefined (for initially unchecked input) or an empty string (for initially checked). Both of them evaluate to false. Why am I not getting true/false instead?

and there are multiple check-boxes and your code is incomplete. — Riddler, Jan 02 '17 at 14:56
Your `data-init` didn't have any value. Just an empty attribute for `checked` checkbox? What do you want to achieve? — Jyothi Babu Araja, Jan 02 '17 at 14:56
Have you tried `data-init="false"`? Your attribute is in fact empty — empiric, Jan 02 '17 at 14:56
What I know `$(this).data("init")` will give string ("true"/"false"). But `$(this).attr("data-init")` will give boolean values. — Abhi, Jan 02 '17 at 14:59
The html5 standard says: "_The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value._" (section 3.2.2) — VPfB, Jan 02 '17 at 15:05
@VPfB yes but `data` is a custom attribute-set which can contain anything. It's not a boolean attribute, see [here](http://stackoverflow.com/a/707702/4202224) — empiric, Jan 02 '17 at 15:07
@empiric This means I cannot select the type. Thank you for correcting my wrong understanding of it. I will use two distinct values. — VPfB, Jan 02 '17 at 15:11

score 3 · Accepted Answer · answered Jan 02 '17 at 14:57

A data attribute is not treated like a boolean attribute by jQuery(like checked, readonly, etc) so you have to give it a value

<td><input checked data-init="true" id="controls-0-modeU" name="controls-0-modeU" type="checkbox" value="y"></td>

<td><input  data-init="false" id="controls-1-modeU" name="controls-1-modeU" type="checkbox" value="y"></td>

if you want to keep your mark up you'll have to do the heavy lifting yourself

var $init = $(this).is("[data-init]");

score 0 · Answer 2 · answered Jan 02 '17 at 14:55

0

you can check if the element has the attribute like so:

if (!!$(this).attr("data-init")) {
  // its there
}
else {
  // its not
}

answered Jan 02 '17 at 14:55

Shiran Dror

1,472
1
23
36

`!!` but why? Despite that, his attribute is in fact empty and doesn't contain a boolean value – empiric Jan 02 '17 at 14:58
because a missing attribute can return `undefined` or `false`, this way you can catch both as "falsy" values – Shiran Dror Jan 02 '17 at 15:00
I'm not sure if that's what the OP wants especially with the linked answer in mind. He is not asking about checking the value he gets but rather on why he is not getting the expected value – empiric Jan 02 '17 at 15:02

jQuery .data() does not return boolean value; why?

2 Answers2