Radio Check

Radio Checkのモジュール

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • ラベル表示

Name

説明

Name

説明

使い方

JSで使用するので+-.form-wrap-+に[radio]か[check]のクラス必須。
*-label-*の箇所がinput等と違うので注意。

  • HTML

  

    Name
    
    
      
  1. 
        
      
    2. 
    

    

      
description

    

  

  
  
  

    Name
    
    
      
  1. 
        
      
    2. 
    

    

      
description

必須設定

+-.form-wrap-+に+-.req-+クラス追加でrequirednの設定になります。
*-input-*にはJSでrequiredを追加します。

  • DEMO

自動生成用コード

上記のややこしいHTMLをScriptで自動生成します

設置したい場所に下記の*-input-*を設置して、任意の値を入れてください。

  • HTML

  <input class="dataset-radio"
    name=""
    data-item=""
    data-val=""
    data-select=""
    data-title=""
    data-dsc=""
    data-class=""
  type="hidden">
  
  
  <input class="dataset-check"
    name=""
    data-item=""
    data-val=""
    data-select=""
    data-title=""
    data-dsc=""
    data-class=""
  type="hidden">
  • [name] name属性を指定
  • [data-item] 表示用の名称：カンマ区切りで複数入力（例："あ,い,う,え"）
  • [data-val]valueに入る値 ：カンマ区切りで複数入力（例："a,b,c,d"）
  • [data-select] 初期チェックの対象：data-valの値を指定（例："b"）
  • [data-title] labelに入る名前指定
  • [data-dsc] 説明文指定
  • [data-class] オプション用のクラスやオリジナルのクラス指定

使用しない属性は削除可能。