Get proper checkbox value using form.serialize

Question

We are currently using $('form').serialize() to get all form information

This will return any checkbox values as "On" or "Off".

Is there any way to get a 1/0 or true/false value using this same method?

score 34 · Accepted Answer · answered Jul 23 '13 at 11:51

34

Yes. You can do it by adding a hidden input with the same name as checkbox which value will be submitted if checkbox is unchecked:

<input type="hidden" name="option" value="false"/>
<input type="checkbox" name="option" value="true"/>

It will submit both values if checkbox is checked. But server side will read the latest one (value of checkbox)

answered Jul 23 '13 at 11:51

Konstantin Rudy

2,187
24
22

2

If you have many checkboxes, this method can get unwieldy. Here is a better approach: http://stackoverflow.com/a/7108685/399435 – Karthic Raghupathi Sep 17 '14 at 04:59
Absolutely disagree with you @KarthicRaghupathi. If multiline custom JS with non-transparent logic looks 'more wieldy' for you, just go for it. The original question was about binary values, not multiple. For me - two lines of html code is a much more elegant solution. – Konstantin Rudy Sep 17 '14 at 08:34
the other approach is also for binary values. Only it deals with all check boxes in the form. I had to deal with 20 checkboxes in a form. Your approach means 40 input tags as opposed to few lines of JS. – Karthic Raghupathi Sep 17 '14 at 08:48
If you have 20 checkboxes on the page, you have another issue, buddy - it's UX is close to 0. Think about that. – Konstantin Rudy Sep 17 '14 at 11:43
Some applications like EMRs/EHRs have large forms with lots of checkboxes. It may not necessarily mean bad UX. – Karthic Raghupathi Sep 17 '14 at 15:57

score 1 · Answer 2 · answered Jul 23 '13 at 12:09

The value of a form control is always a string. You can use radio buttons to get different values for the same control name:

<form ...>
  <input type="radio" name="whatever" value="true">true
  <br>
  <input type="radio" name="whatever" value="false">false
  ...
</form>

Only one can be checked, and only the checked name/value will be sent to the server.

score 1 · Answer 3 · answered Jul 04 '17 at 11:58

If we have multiple checkboxed in our page like :

  <input id="reminder" name="Check1" value="false" type="checkbox" /> 

  <input id="alarm" name="Check2" value="false" type="checkbox" />

we have to bind the change event of these checkboxes and set its value to true or false.

 $('input[type=checkbox]').on('change', function(){
    var name =    $(this).attr('name');
    if($(this).is(':checked')){
    $('input[name= "' +name +'"]').val(true);
        $(this).val(true);
    }
    else{
       $(this).val(false);
       $('input[name= "' +name +'"]').val(false);
    }
});

By default, checkbox value doesn't appear in $('form').serializeArray(), It appears when it is checked.

We have to keep one hidden field for each checkbox like :

<input type="hidden" value="false" name="Check1" />
<input type="hidden" value="false" name="Check2" />

Now when we serialize the form now, we get the correct value like : Check1=true Check2=false

score 0 · Answer 4 · answered Mar 25 '15 at 12:58

0

<input type="checkbox" name="check1" value="true" id="check1">

just set the value

answered Mar 25 '15 at 12:58

Rana

1,150
3
13
28

2

it's not gonna get updated if we check/uncheck the checkbox and needs more js to work – behz4d Sep 28 '16 at 14:07

Petro Franko · Answer 5 · 2018-01-14T22:38:51.260

0

You can add a new class for check boxes and set value when clicked.

<input class="checkbox" id="someId" type="checkbox" value="false" />Checkbox

And use a small JQuery helper

$('.checkbox').click(function () {
    $(this).val() == "false" ? $(this).val("true") : $(this).val("false");
});

Then you will be able to get the value of the check box or serialize a form.

edited Jan 14 '18 at 22:38

answered Jan 14 '18 at 22:05

Petro Franko

3,973
1
16
16

Get proper checkbox value using form.serialize

5 Answers5