:selected【選択状態要素】

メモ

構文

jQuery( ":selected" ) 1.0

関連


<div id="id1">
  <p>
    <label><input type="checkbox">&lt;input type="checkbox"&gt;</label>
    <label><input type="checkbox" checked>&lt;input type="checkbox" checked&gt;</label>
  </p>
  <p>
    <label><input type="radio" name="radio1">&lt;input type="radio" name="radio1"&gt;</label>
    <label><input type="radio" name="radio1" checked>&lt;input type="radio" name="radio1" checked&gt;</label>
  </p>
  
  <select>
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
  </select>
  <select size="5">
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
  </select>
  <select size="5" multiple>
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
  </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">&lt;input type="checkbox"&gt;</label>
    <label><input type="checkbox" checked>&lt;input type="checkbox" checked&gt;</label>
  </p>
  <p>
    <label><input type="radio" name="radio2">&lt;input type="radio" name="radio2"&gt;</label>
    <label><input type="radio" name="radio2" checked>&lt;input type="radio" name="radio2" checked&gt;</label>
  </p>
  
  <select>
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
  </select>
  <select size="5">
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
    <option>&lt;option&gt;
  </select>
  <select size="5" multiple>
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
    <option selected>&lt;option selected&gt;
    <option>&lt;option&gt;
  </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>