:selected【選択状態要素】
メモ
- 選択状態の要素を選択
- チェックボックス・ラジオボタンを含む場合は、:checked【チェック状態・選択状態 要素】
- パフォーマンス
- ネイティブ DOM querySelectorAll() 未使用の為、低速
純粋なCSSセレクタを使用後、.filter(":selected")
を使用した方が高速
- ネイティブ DOM querySelectorAll() 未使用の為、低速
- 選択対象
構文
jQuery( ":selected" ) 1.0
関連
例
<div id="id1">
<p>
<label><input type="checkbox"><input type="checkbox"></label>
<label><input type="checkbox" checked><input type="checkbox" checked></label>
</p>
<p>
<label><input type="radio" name="radio1"><input type="radio" name="radio1"></label>
<label><input type="radio" name="radio1" checked><input type="radio" name="radio1" checked></label>
</p>
<select>
<option><option>
<option selected><option selected>
<option><option>
<option><option>
<option><option>
</select>
<select size="5">
<option><option>
<option selected><option selected>
<option><option>
<option><option>
<option><option>
</select>
<select size="5" multiple>
<option><option>
<option selected><option selected>
<option><option>
<option selected><option selected>
<option><option>
</select>
<p id="output1" style="color:red;"></p>
</div>
<style>
.style1 { color:red; background-color:yellow; border:2px red dashed; }
</style>
<script>
var list = $( "#id1 :selected" );
list.addClass("style1").append(" (選択)");
var msg = "項目数 = " + list.length;
$( "#output1" ).append(msg);
</script>
<div id="id2">
<p>
<label><input type="checkbox"><input type="checkbox"></label>
<label><input type="checkbox" checked><input type="checkbox" checked></label>
</p>
<p>
<label><input type="radio" name="radio2"><input type="radio" name="radio2"></label>
<label><input type="radio" name="radio2" checked><input type="radio" name="radio2" checked></label>
</p>
<select>
<option><option>
<option selected><option selected>
<option><option>
<option><option>
<option><option>
</select>
<select size="5">
<option><option>
<option selected><option selected>
<option><option>
<option><option>
<option><option>
</select>
<select size="5" multiple>
<option><option>
<option selected><option selected>
<option><option>
<option selected><option selected>
<option><option>
</select>
<p id="output2" style="color:red;"></p>
</div>
<style>
.style2 { color:blue; background-color:yellow; border:2px blue dashed; }
</style>
<script>
var list = $( "#id2 *" ).filter( ":selected" );
list.addClass("style2").append(" (選択)");
var msg = "項目数 = " + list.length;
$( "#output2" ).append(msg);
</script>