imuiRadio
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.0 |
バージョン | 8.0.6 |
機能説明
- ラジオボタンを作成します。
- ラベルタグ出力を出力します。
- <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>