jQuery val() and checkboxes

I can't think of a good reason why it wouldn't return true or false. Failing that, at least return "on" only when checked, and an empty string when not. Failing that, at least always return an empty string, given that checkboxes have no value attribute!

Checkboxes do have a value attribute. It's quite common to use it in eg. multi-checkboxes in forms, for example:

<input type="checkbox" name="foo[]" value="1" />
<input type="checkbox" name="foo[]" value="2" />

Then when user submits the form, the server can parse which of the checkboxes were checked by checking the values of the foo[] array. The value of the checkbox does not change whether it is checked or not; the browser simply does not send the values of unchecked checkboxes to the server. If you do eg. $('#your-form').serialize()in jQuery, it should work similarly; it shouldn't include values of unchecked checkboxes. If you omit the value from checkbox, it simply defaults to on.

If you want to check whether an individual checkbox is checked or not in jQuery, the best most descriptive way is to do $(this).is(':checked')

You say that "checkboxes have no value attribute". On the contrary: the value attribute is optional except on checkboxes and radio boxes.

From the W3C specifications:

[the value attribute] is optional except when the type attribute has the value "radio" or "checkbox"

on is the default value that your browser gives the element when you ignore the specification and don't set a value attribute.

You need to remember what the value means: it is sent with the name of the element to the server when the form is submitted. If it is not checked, the value is not sent. The value on is therefore only sent when the checkbox is checked.

Perhaps this should help

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
      alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
    });

});

Use input[type=checkbox] to select input type="checkbox" since checkbox is and input with type="checkbox"

And also put value attribute to checkbox.

On jsfiddle

UPDATE

<form method="post" action="#">
    PHP<input type="checkbox" name="ch[]" value="PHP"><br/>
    JS<input type="checkbox" name="ch[]" value="JS"><br/>
    JAVA<input type="checkbox" name="ch[]" value="JAVA"><br/>
    PYTHON<input type="checkbox" name="ch[]" value="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

And php

if($_POST){
foreach($_POST['ch'] as $post => $value){
    echo "$post -> $value <br/>";
}
}

They all share same name as they are a common group of button. You you know which was checked and which was not through their values.

The other way is

if($_POST){
    foreach($_POST as $post => $value){
        echo "$post -> $value <br/>";
    }
}

<form method="post" action="#">
    PHP<input type="checkbox" name="PHP"><br/>
    JS<input type="checkbox" name="JS"><br/>
    JAVA<input type="checkbox" name="JAVA"><br/>
    PYTHON<input type="checkbox" name="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

But the previous seems to add more dynamic and less tedious(I would believe).

And as to @Capsule's question

alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
<input type="checkbox"> Check me.

returns the value on i believe that's the default value of the check-box.

And the second experiment also give the on value.

I hope I am not wrong.