:radio【ラジオボタン要素】

メモ

  • ラジオボタン要素を選択
    • $( "[type=radio]" ) と同等
    • $( ":radio" ) よりも $( "input:radio" ) を推奨 ( "*:～" とみなされる)
    • 同一名のグループの選択：$( "input[name=【グループ名】]:radio" ) ( 例 参照)
  • パフォーマンス
    • ネイティブ DOM querySelectorAll() 未使用の為、低速
      $( "[type=radio]" ) の方が高速 ( 例 参照)
  • 選択対象

構文

jQuery( ":radio" ) 1.0

関連

例

<p id="id1">
  <input value="<input>">
  <label><input type="checkbox">&lt;input type="checkbox"&gt;</label>
  <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>

<script>
$( "#id1 input:radio" ).wrap( "<span></span>" ).parent().css( "border", "2px red dashed" );
</script>


<p id="id2">
  <input value="<input>">
  <label><input type="checkbox">&lt;input type="checkbox"&gt;</label>
  <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>

<script>
$( "#id2 input[type=radio]" ).wrap( "<span></span>" ).parent().css( "border", "2px red dashed" );
</script>


<div id="id3">
  <fieldset>
    <legend>name="radio31"</legend>
    <label><input type="radio" name="radio31">&lt;input type="radio" name="radio31"&gt;</label>
    <label><input type="radio" name="radio31" checked>&lt;input type="radio" name="radio31" checked&gt;</label>
  </fieldset>
  <br>
  <fieldset>
    <legend>name="radio32"</legend>
    <label><input type="radio" name="radio32">&lt;input type="radio" name="radio32"&gt;</label>
    <label><input type="radio" name="radio32" checked>&lt;input type="radio" name="radio32" checked&gt;</label>
  </fieldset>
</div>

<script>
$( "#id3 input[name=radio31]:radio" ).wrap( "<span></span>" ).parent().css( "border", "2px red dashed" );
$( "#id3 input[name=radio32]:radio" ).wrap( "<span></span>" ).parent().css( "border", "2px blue dashed" );
</script>

name="radio31"

name="radio32"