概述 checked selector
返回值:Array<Element(s)>
描述:匹配所有勾选的元素。
这个 :checked
选择器适用于复选框 (checkbox) ,单选框(radio button),和select
元素的option元素。
对于检索select
元素选中的选择项(option), 请使用 :selected
选择器。
示例
查找所有选中的复选框元素
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
$("input:checked")
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
确定有多少input元素是选中的.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <form> <p> <input type="checkbox" name="newsletter" value="Hourly" checked="checked"> <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type="checkbox" name="newsletter" value="Monthly" checked> <input type="checkbox" name="newsletter" value="Yearly"> </p> </form> <div></div> <script> var countChecked = function() { var n = $( "input:checked" ).length; $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" ); }; countChecked(); $( "input[type=checkbox]" ).on( "click", countChecked ); </script> </body> </html>
运行一下
Identify the checked radio input.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> input, label { line-height: 1.5em; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <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> <script> $( "input" ).on( "click", function() { $( "#log" ).html( $( "input:checked" ).val() + " is checked!" ); }); </script> </body> </html>
运行一下