:checked【チェック状態・選択状態 要素】
メモ
- チェック状態・選択状態 要素を選択
- HTML5:<option>【選択リストの選択項目】の選択状態のみの場合は、:selected【選択状態要素】
- 選択対象
- 選択状態のtype属性が"checkbox" (チェックボックス)の HTML5:<input>【汎用入力コントロール】
- 選択状態のtype属性が"radio" (ラジオボタン)の HTML5:<input>【汎用入力コントロール】
- HTML5:<select>【選択リスト】 内の 選択状態の HTML5:<option>【選択リストの選択項目】
構文
jQuery( ":checked" ) 1.0
関連
例
<div id="id1">
<p>
<label><input type="checkbox">チェックボックス</label>
<label><input type="checkbox" checked>チェックボックス</label>
</p>
<p>
<label><input type="radio" name="radio1">ラジオボタン</label>
<label><input type="radio" name="radio1" checked>ラジオボタン</label>
</p>
<p>
<select>
<option>項目 (未選択)
<option selected>項目 (選択)
<option>項目 (未選択)
</select>
<select size="5">
<option>項目 (未選択)
<option>項目 (未選択)
<option>項目 (未選択)
</select>
<select size="5">
<option>項目 (未選択)
<option selected>項目 (選択)
<option>項目 (未選択)
<option>項目 (未選択)
<option>項目 (未選択)
</select>
<select size="5" multiple>
<option>項目 (未選択)
<option selected>項目 (複数選択)
<option>項目 (未選択)
<option selected>項目 (複数選択)
<option>項目 (未選択)
</select>
</p>
</div>
<p id="result" style="color:red;"></p>
<style>
.style1 { color:red; background-color:yellow; border:2px red dashed; }
</style>
<script>
var list = $( "#id1 :checked" );
$( "#result" ).append( "選択状態の項目数=" + list.length );
$( "#id1 input:checked" ).wrap( "<span></span>" ).parent().css( "border", "2px red dashed" );
$( "#id1 option:checked" ).addClass("style1");
</script>