機能説明

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

属性一覧

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

サンプル

チェックボックス(画面表示時に選択しない場合)

チェックボックス(画面表示時に選択しない場合)
  • label属性を設定することで、自動的にラベルを出力します。
HTML
<imart type="imuiCheckbox" label="ラベル" />

チェックボックス(画面表示時に選択したい場合)

チェックボックス(画面表示時に選択したい場合)
  • label属性を設定することで、自動的にラベルを出力します。
サーバサイド JavaScript
var sampleChecked = true;
HTML
<imart type="imuiCheckbox" label="ラベル" checked=sampleChecked />

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

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

イベントを指定(jQuery)

  • jQueryのbindメソッドを使用して、クリックイベントを実行します。
HTML
<imart type="imuiCheckbox" id="sampleId" label="ラベル" checked="checked" />
<script type="text/javascript">
  $(function() {
    $('#sampleId').bind('click', function(){
      alert(this.checked);
    });
  });
</script>