:checked

匹配所有复选框和单选按钮中,被选中的元素(不包括 select 控件中的 option 元素)。

:checked 选择器仅适用于复选框和单选按钮。如果要选择 select 中选中的 option 元素,请使用 :selected 选择器。

示例:

查找所有被选中的 input 元素。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>


<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>


<script>


function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n === 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);


</script>
</body>
</html>

演示:

<!DOCTYPE html>
<html>
<head>
<style>
input, label { line-height: 1.5em; }
</style>
<script src="jquery.min.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").click(function() {
  $("#log").html( $(":checked").val() + " is checked!" );
});


</script>
</body>
</html>

演示: