:checkbox Selector

Categories: Selectors > Form | Selectors > jQuery Extensions

checkbox selector

version added: 1.0jQuery(':checkbox')

Description: Selects all elements of type checkbox.

$(':checkbox') is equivalent to $('[type=checkbox]'). As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':checkbox') is equivalent to $('*:checkbox'), so $('input:checkbox') should be used instead.

Additional Notes:

Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="checkbox"] instead.

Example:

Finds all checkbox inputs.

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />

    <input type="image" />
    <input type="password" />
    <input type="radio" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :checkbox Selector or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to :checkbox Selector? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

larry

I am using jquery with SharePoint. I have written some code to hide a column, I am trying to make this dynamic through the use of checkboxes. when unchecked Hide the column when checked show the column. It seems I ican only get my function to fireonce per page load. How can I get it to fire everytime the box is clicked?

$(document).ready(function() {
$(“#cbStatus”).click(function () {
if ($(‘#cbStatus:checked’).val() !== undefined) {
HideColumn(‘Status’,false);
} else {
HideColumn(‘Status’,true);
}
});
});

Chet

Larry – I was working on something similar and tried your code, and it worked for me! Mine is a hidden text input that slides down and slides up depending on whether a specific checkbox is clicked. It fires every time perfectly.

Hope this helps:

// ‘other’ is the checkbox
$(“#other”).click(function () {
if ($(‘#other:checked’).val() !== undefined) {
//otherInput is the hidden text input
$(“#otherInput”).slideDown(‘fast’);
} else {
$(“#otherInput”).slideUp(‘fast’);
}
});
Anonymous

u can do this too
$(document).ready(function() {
$(“#cbStatus”).click(function () {
HideColumn(‘Status’,this.checked);
});
});
Abhishek

I think that should work if you try to do hide and show on the click of that check box

$(document).ready(function() {
$(“#cbStatus”).click(function () {
if ($(‘#cbStatus’).checked == false) {
HideColumn(‘Status’,false);
} else {
HideColumn(‘Status’,true);
}
});
});

http://twitter.com/adambrill Adam Brill

I have run into an issue where IE errors running a selector “form :checkbox”. If this happens for you, change it to “form input:checkbox” and it works.

http://marcolz.myopenid.com/ Marco Lazzeri

Thanks Adam! I've experienced the same and replacing them with input:checkbox fixed the issue.

http://www.lapuvieta.lv jzalums

Check if input field is checked.

alert ( $(“input”).is(':checked') );
http://twitter.com/NewGenerationC Клюшин Герман

$(“#other”).click(function ()
How about other methods of input (keyboard)?
Maybe something like onChange event handler?
qarluq

Hi,
I have two checkbox elements. I want to get the text value (“Sonday”, “Monday”) of these checkboxes . And I want to change them with some other values (“tuesday”, Wednesday”). I do not know how to get these two values first. I tried .val() and .text() methods, they did not work. Do you any idea about how to get them and replace them with some other values?
<form>
<input class=”checkbox” id=”1″ name=”attribute” type=”checkbox” value=”one”>Sunday
<input class=”checkbox” id=”2″ name=”attribute” type=”checkbox” value=”two “>Monday
</form>

http://twitter.com/maxx0r Max

You should use radio in this case. Checkboxes are primarly for selecting multiple options. If only one option can be selected at the same time, you should use radiobuttons.
http://rcarrier84.myopenid.com/ rcarrier

qarluq, wrap your checkbox labels like this:
<input class=”checkbox” id=”1″ name=”attribute[]” type=”checkbox” value=”one”><label for=”1″ id=”l1″>Sunday</label>
<input class=”checkbox” id=”2″ name=”attribute[]” type=”checkbox” value=”two”><label for=”2″ id=”l2″>Monday</label>

// Use this code to get the values of all checked checkboxes
var attributes = [];
$('input:checkbox[name="attribute[]“]:checked').each(function(index) { attributes.push($(this).val());});

//Use this code to get text of all checked chexkboxes
var attribute_names = [];
$('input:checkbox[name="attribute[]“]:checked').each(function(index) { attributes_names.push($(this).next(“label”).text());});

//To set the text of the checkbox label

$(“#_your_id_”).next(“label”).text( “_your_new_text_here_” );

Example:

$(“#1″).next(“label”).text( “My favorite day!” );

Hope this helps. The reason you can not get the text next to your checkbox with your previous markup is that it is not part of the input element. It is text node separate from it in the DOM. Wrapping it in a label tag makes it easy for us to access it with the .next(“label”) method.

http://rcarrier84.myopenid.com/ rcarrier

qarluq, wrap your checkbox labels like this:
<input class=”checkbox” id=”1″ name=”attribute[]” type=”checkbox” value=”one”><label for=”1″ id=”l1″>Sunday</label>
<input class=”checkbox” id=”2″ name=”attribute[]” type=”checkbox” value=”two”><label for=”2″ id=”l2″>Monday</label>

// Use this code to get the values of all checked checkboxes
var attributes = [];
$('input:checkbox[name="attribute[]“]:checked').each(function(index) { attributes.push($(this).val());});

//Use this code to get text of all checked chexkboxes
var attributes_names = [];
$('input:checkbox[name="attribute[]“]:checked').each(function(index) { attributes_names.push($(this).next(“label”).text());});

//To set the text of the checkbox label

$(“#_your_id_”).next(“label”).text( “_your_new_text_here_” );

Example:

$(“#1″).next(“label”).text( “My favorite day!” );

Hope this helps. The reason you can not get the text next to your checkbox with your previous markup is that it is not part of the input element. It is a text node separate from it in the DOM. Wrapping it in a label tag makes it easy for us to access it with the .next(“label”) method.
AUX00

I have a checkbox that selects all checkboxes on the form. I can see the checkboxes as checked when I do this, but the onclick events next to the checkboxes do not fire??

jQuery API

:checkbox Selector