Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 WEB 」 - 中項目:「 jQueryMobile 」

「 jQueryMobileのチェックボックスの基本 」

jQueryMobileのチェックボックスの基本について


回答

以下参照。
 
参考URL
http://mam-mam.net/jqm_sample/check.html

ソース


チェックボックス
  <label for="cb1">チェックボックスラベル1</label>
  <input type="checkbox" name="cb1" id="cb1" checked>
  <label for="cb2">チェックボックスラベル2</label>
  <input type="checkbox" name="cb2" id="cb2">
 

チェックボックス(ミニ)
  <label for="cb01">チェックボックスラベル1</label>
  <input type="checkbox" name="cb01" id="cb01" data-mini="true" checked>
  <label for="cb02">チェックボックスラベル2</label>
  <input type="checkbox" name="cb02" id="cb02" data-mini="true">
 

チェックボックス(コンテナ)
  <div class="ui-field-contain">    <!-- IE8以下:変な下線が引かれる それ以外:labelやlegendの文字列が左側につく  -->
    <fieldset data-role="controlgroup">  <!-- ラジオボタンを使うときは fieldsetタグdata-role="controlgroup"でくくること -->
    <legend>選択</legend>
    <label for="cb11">チェックボックスラベル1</label>
    <input type="checkbox" name="cb11" id="cb11" checked>
    <label for="cb12">チェックボックスラベル2</label>
    <input type="checkbox" name="cb12" id="cb12">
    </fieldset>
  </div>
 

チェックボックス(水平コンテナ)
  <div class="ui-field-contain">    <!-- IE8以下:変な下線が引かれる それ以外:labelやlegendの文字列が左側につく  -->
    <fieldset data-role="controlgroup" data-type="horizontal">  <!-- ラジオボタンを使うときは fieldsetタグdata-role="controlgroup"でくくること -->
    <legend>選択</legend>
    <label for="cb21">チェックボックスラベル1</label>
    <input type="checkbox" name="cb21" id="cb21" checked>
    <label for="cb22">チェックボックスラベル2</label>
    <input type="checkbox" name="cb22" id="cb22">
    <label for="cb23">チェックボックスラベル3</label>
    <input type="checkbox" name="cb23" id="cb23">
    </fieldset>
  </div>


Mam's WebSite