:checked Selector
Categories: Form
jQuery(':checked')
Description: Matches all elements that are checked.
-
jQuery(':checked')
version added: 1.0
The :checked
selector works for checkboxes and radio buttons. For select elements, use the :selected
selector.
-
Finds all input elements that are checked.
HTML:
<form> <p> <input type="checkbox" name="newsletter" checked="checked" value="Hourly" /> <input type="checkbox" name="newsletter" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> <input type="checkbox" name="newsletter" value="Yearly" /> </p> </form> <div></div>
CSS:
div { color:red; }
Code:
function countChecked() { var n = $("input:checked").length; $("div").text(n + (n <= 1 ? " is" : " are") + " checked!"); } countChecked(); $(":checkbox").click(countChecked);
-
HTML:
<form> <div> <input type="radio" name="fruit" value="orange" id="orange"> <label for="orange">orange</label> </div> <div> <input type="radio" name="fruit" value="apple" id="apple"> <label for="apple">apple</label> </div> <div> <input type="radio" name="fruit" value="banana" id="banana"> <label for="banana">banana</label> </div> <div id="log"></div> </form>
CSS:
input, label { line-height: 1.5em; }
Code:
$("input").click(function() { $("#log").html( $(":checked").val() + " is checked!" ); });