:checked

$(':checked') 1.0追加

チェック入りのチェックボックスとラジオボタンの要素を選択します。 :checkedはチェックボックスとラジオボタンのみ有効です。
SELECT要素には、:selectedを使用してください。

デモ

チェックされている要素を選択し、マークします。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<p>
<input type="checkbox" name="news" checked="checked" value="1" />
<input type="checkbox" name="news" value="2" />
<input type="checkbox" name="news" value="3" />
<input type="checkbox" name="news" checked="checked" value="4" />
<input type="checkbox" name="news" value="5" />
</p>
</form>
<div></div>
<script>
function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + "つの要素がチェックされています。");
}
countChecked();
$(":checkbox").click(countChecked);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
  input, label { line-height: 1.5em; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
  <div>
    <input type="radio" name="fruit" value="みかん" id="orange">
    <label for="orange">みかん</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="りんご" id="apple">
    <label for="apple">りんご</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="バナナ" id="banana">
    <label for="banana">バナナ</label>
  </div>
  <div id="log"></div>
</form>
<script>
  $("input").click(function() {
    $("#log").html( $(":checked").val() + "が選択されました。" );
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM