imuiRadio
機能説明
- ラジオボタンを作成します。
- ラベルタグ出力を出力します。
- <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>