I need to get the value of a checkbox by name. I have the following code:

<input type="hidden" name="my_checkbox" value="0">
<input type="checkbox" name="my_checkbox" id="my_checkbox_id" value="1"  />

The idea is that if the checkbox is not checked, I would get the value of the input type hidden (which is 0).

Here is what I have tried but did not work:

$('input[name=my_checkbox]').val();

However this returned the value of both the hidden input and checkbox. Can anyone tell me how I can get the value of the checkbox when checked (1) or else get the value of the hidden input (0) when unchecked? I guess this has to be done by name so that if the checkbox is unchecked, I get the value of the hidden input as if the checkbox is unchecked you won't get its value.

I need to get the value of a checkbox by name. I have the following code:

<input type="hidden" name="my_checkbox" value="0">
<input type="checkbox" name="my_checkbox" id="my_checkbox_id" value="1"  />

The idea is that if the checkbox is not checked, I would get the value of the input type hidden (which is 0).

Here is what I have tried but did not work:

$('input[name=my_checkbox]').val();

However this returned the value of both the hidden input and checkbox. Can anyone tell me how I can get the value of the checkbox when checked (1) or else get the value of the hidden input (0) when unchecked? I guess this has to be done by name so that if the checkbox is unchecked, I get the value of the hidden input as if the checkbox is unchecked you won't get its value.

• javascript
• jquery
• html
• jquery-mobile

Share Follow asked Jan 1, 2013 at 18:04 user1809790user1809790 1,36955 gold badges2525 silver badges5555 bronze badges 9

• I'd put an ID on the hidden element, so that I can retrieve both elements independently. – Šime Vidas Commented Jan 1, 2013 at 18:07
• Just out of curiosity, will your values always be 0 and 1 ? – Roko C. Buljan Commented Jan 1, 2013 at 18:26
• @roXon yes if the checkbox is checked, it will be 1, otherwise it will be 0. This does not apply to 1 checkbox only, I have a set of checkboxes which will do the same thing – user1809790 Commented Jan 1, 2013 at 18:26
• 1 Than why you need the 0 valued checkbox (hidden one)? you don't need it at all. – Roko C. Buljan Commented Jan 1, 2013 at 18:28
• @roXon this value is being stored in the database so on page load I check/uncheck the checkboxes as required – user1809790 Commented Jan 1, 2013 at 18:38

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 3

<input type="hidden" name="my_checkbox" value="0">
<input type="checkbox" name="my_checkbox" id="my_checkbox_id" value="1"  />

Try this it worked for me:

$( 'input[name="my_checkbox"]:checked' ).val();

Why don't you do this:

if($("#my_checkbox_id").is(':checked')) {
    output = $("#my_checkbox_id").val();
} else {
    output = $('input[type=hidden]').val();
}

just find the :visible checkbox:

$('input[name="my_checkbox"]:visible').change(function() {
  if ($('input[name="my_checkbox"]:visible').is(':checked')) {
    alert($('input[name="my_checkbox"]:visible').val());
  } else {
    alert($('input[name="my_checkbox"]:hidden').val());
  }
});

tryout the fiddle: http://jsfiddle/JgzGa/1/

Actually you don't need the hidden one, you just need to say:
if checkbox is not checked set his value to '0'
and this is all you need:

$('input:checkbox').not(':checked').val(0);

You could add a new function for it:

$.fn.checkboxVal = function() {
    var checked = $(this).filter("[type=checkbox]:checked");
    if (checked.length)
        return checked.val();

    return $(this).filter("[type=hidden]").val();
};

Then you can say $("input[name=foo]").checkboxVal() and it'll get you the correct value.

Untested, so fixing any bugs is left as an exercise for the reader.