機能説明

  • ラジオボタンを作成します。
  • ラベルタグ出力を出力します。
  • <input type="radio">にのみ指定した属性が適用されます。
  • ただし、下記の属性を指定した場合にのみ、出力された<input type="radio">とlabelタグにも属性が適用されます。
    • hidden属性
    • style属性の display: none
    • style属性の visibility: hidden

属性一覧

以下に記述する以外にも <input type="radio"/> と同じ属性が利用できます。
注釈 属性名 説明 省略時の動作
HTML5
Boolean属性
autofocus boolean 画面表示時に、ラジオボタンにフォーカスをあてます false
Boolean属性 checked boolean 画面表示時に、ラジオボタンをチェック状態にします false
Boolean属性 disabled boolean ラジオボタンを無効化します false
Boolean属性 hidden boolean ラジオボタンを非表示にします false
id string ラジオボタンのidです 代替idを付与
国際化 無害化 label string ラジオボタンの表示名です -
name string ラジオボタンのnameです 代替nameを付与
Boolean属性 required boolean ラジオボタンの選択を必須にします false
無害化 value string フォーム送信時に送信される値です -
無害化 その他 string ユーザ定義属性です -

サンプル

ラジオボタン(画面表示時に選択しない場合)

ラジオボタン(画面表示時に選択しない場合)
  • name属性を同一にすることで、グループ化されます。
HTML
<imart type="imuiRadio" name="radio" label="ラベル1" />
<imart type="imuiRadio" name="radio" label="ラベル2" />
<imart type="imuiRadio" name="radio" label="ラベル3" />

ラジオボタン(画面表示時に選択したい場合)

ラジオボタン(画面表示時に選択したい場合)
  • name属性を同一にすることで、グループ化されます。
サーバサイド JavaScript
var sampleChecked = true;
HTML
<imart type="imuiRadio" name="radio" label="ラベル1" />
<imart type="imuiRadio" name="radio" label="ラベル2" checked=sampleChecked />
<imart type="imuiRadio" name="radio" label="ラベル3" />

イベントを指定(onClick属性)

  • onClick属性を使用して、クリックイベントを実行します。
HTML
<imart type="imuiRadio" name="radio" label="ラベル1" value="value1" onClick="sampleFunction(this)" />
<imart type="imuiRadio" name="radio" label="ラベル2" value="value2" checked="checked" onClick="sampleFunction(this)" />
<imart type="imuiRadio" name="radio" label="ラベル3" value="value3" onClick="sampleFunction(this)" />
<script type="text/javascript">
  function sampleFunction(obj) {
    alert(obj.value);
  }
</script>

イベントを指定(jQuery)

  • jQueryのbindメソッドを使用して、クリックイベントを実行します。
HTML
<imart type="imuiRadio" name="radio" label="ラベル1" value="value1" />
<imart type="imuiRadio" name="radio" label="ラベル2" value="value2" checked="checked" />
<imart type="imuiRadio" name="radio" label="ラベル3" value="value3" />
<script type="text/javascript">
  $(function() {
    $('[name=radio]').bind('click', function(){
      alert(this.value);
    });
  });
</script>