setting custom initial value for indeterminate checkbox works only after clicking

Question

I've been working on implementing a tri-state checkbox based on the demo presented in this CSS-tricks article. However, I did a small change where I also set the input value through $(el).val() so 0 is indeterminated and 1 is checked:

inputs.on('click.tristate', function () {
    el = $(this);
    switch (el.data('checked')) {

        // unchecked, going indeterminate
        case -1:
            el.data('checked', 0);
            el.val(0) 
            el.prop('indeterminate', true);
            break;

            // indeterminate, going checked
        case 0:
            el.data('checked', 1);
            el.val(1); 
            el.prop('indeterminate', false);
            el.prop('checked', true);
            break;

            // checked, going unchecked
        default:
            el.data('checked', -1);
            el.prop('indeterminate', false);
            el.prop('checked', false);
    }
});

This works as expected - when clicking it switches between states, and when you send the form, it sends indeterminate as 0 and checked as 1 (and unchecked it doesn't send at all).

Now I'm having trouble with setting the initial value. I've added this:

inputs.each(function () {
    if ($(this).data('checked') === 0) {
        this.indeterminate = true;
        this.value = 0;
        return;
    }
    if (this.checked) $(this).data('checked', 1);
    else              $(this).data('checked', -1);
});

It works visually, but if you run $('form').serialize() you see that it treats the indeterminate input as if it was unchecked (i.e., not adding it). If you click a few times, and do a full loop, it does add it. So what gives?

I've made a JSFiddle Demo to demonstrate the behavior. I tried many different ways to define the initial value, but I just can't seem to be able to make it treat the indeterminate field as something that needs to be added.

What can I do?

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

I guess what I found about HTML attribute is a BUG > Here.

<input type="checkbox" name="cb2" value='0' data-checked='0' checked="false" class="tristate-checkbox" />

There is an explanation about your problem with checkbox value and serialize.

Normally serialize handle checkbox by a single way: checked = false equals no display and checked = true equals display something.

jQuery serialize closely mimics how a standard form would be serialized by the browser before being appended to the query string or POST body in the request. Unchecked checkboxes aren't included by the browser, which makes sense really because they have a boolean state

edited May 23 '17 at 10:33

Community

1
1

answered Aug 28 '14 at 08:32

Orelsanpls

22,456
6
42
69

Yeah, of course I can loop on them all and build the query myself. But I **didn't ask how to do that and I don't want to anyway**. Besides - after clicking, `.serialize()` *does indeed recognize the custom value*. In other words, I want to stimulate that with the code so `serialize` will work out of the box (triggering click on the input doesn't work) – yuvi Aug 28 '14 at 08:36
1

Well if your problem is initial statement look [here](http://jsfiddle.net/d2v0o4qx/6/). You missed arguments on your initializing phase. – Orelsanpls Aug 28 '14 at 08:48
Yes that's the answer I was looking for! how come `checked="false"` fixes this? I'd love a detailed explanation because I find this a bit puzzling to be truthful... – yuvi Aug 28 '14 at 09:05
Well I guess serialize function need it. It looking for checked attribute. If this attribute is not here, it display nothing, if the attribute is here it interpret it. My hypothesis make sense :) – Orelsanpls Aug 28 '14 at 09:08
Only clicking doesn't add the `checked` attribute, and still causes the form to check the value. I'm thinking you're right though - the checked attribute is probably not set and that's the problem (however, setting `checked = false` [through the javascript](http://jsfiddle.net/yuvii/d2v0o4qx/7/) doesn't work so I'm even more confused...) – yuvi Aug 28 '14 at 09:14
1

I guess what I found about HTML attribute is a BUG. Look at [Here](http://stackoverflow.com/questions/3029870/jquery-serialize-does-not-register-checkboxes). There is an explanation about checkbox value and serialize. Normally serialize handle checkbox by a single way: checkek = false equals no display and checked = true equals display something – Orelsanpls Aug 28 '14 at 10:24
1

OK, that makes it a tad clearer. Anyway, update your answer with the relevant information and I'll mark it as correct – yuvi Aug 28 '14 at 10:27

setting custom initial value for indeterminate checkbox works only after clicking

1 Answers1