{"name":"checked","type":"selector","title":":checked Selector","deprecated":null,"removed":null,"desc":"Matches all elements that are checked or selected.","categories":["selectors/form-selectors","version/1.0"],"entries":[{"return":"","signatures":{"added":"1.0"},"examples":[{"desc":"Determine how many input elements are checked.","code":"\nvar countChecked = function() {\n  var n = $( \"input:checked\" ).length;\n  $( \"div\" ).text( n + (n === 1 ? \" is\" : \" are\") + \" checked!\" );\n};\ncountChecked();\n\n$( \"input[type=checkbox]\" ).on( \"click\", countChecked );\n","css":"\n  div {\n    color: red;\n  }\n","html":"\n<form>\n  <p>\n    <input type=\"checkbox\" name=\"newsletter\" value=\"Hourly\" checked=\"checked\">\n\n    <input type=\"checkbox\" name=\"newsletter\" value=\"Daily\">\n    <input type=\"checkbox\" name=\"newsletter\" value=\"Weekly\">\n\n    <input type=\"checkbox\" name=\"newsletter\" value=\"Monthly\" checked>\n    <input type=\"checkbox\" name=\"newsletter\" value=\"Yearly\">\n  </p>\n</form>\n<div></div>\n"},{"desc":"Identify the checked radio input.","code":"\n$( \"input\" ).on( \"click\", function() {\n  $( \"#log\" ).html( $( \"input:checked\" ).val() + \" is checked!\" );\n});\n","css":"\n  input, label {\n    line-height: 1.5em;\n  }\n","html":"\n<form>\n  <div>\n    <input type=\"radio\" name=\"fruit\" value=\"orange\" id=\"orange\">\n    <label for=\"orange\">orange</label>\n  </div>\n  <div>\n    <input type=\"radio\" name=\"fruit\" value=\"apple\" id=\"apple\">\n    <label for=\"apple\">apple</label>\n  </div>\n  <div>\n    <input type=\"radio\" name=\"fruit\" value=\"banana\" id=\"banana\">\n    <label for=\"banana\">banana</label>\n  </div>\n  <div id=\"log\"></div>\n</form>\n"}],"longdesc":"\n    <p>The <code>:checked</code> selector works for checkboxes, radio buttons, and select elements. For select elements only, use the <code>:selected</code> selector.</p>\n  "}],"slug":"checked-selector"}