【教學】點擊按鈕→顏色改變

範例一： 單選題

<div class="QA_BTN_MCQ">
<ul class="btn_list" data-color="lightBlue" data-widthratio="">
<li><label><input class="radio-input" name="radio01" type="radio" value="0"><span class="input_img y01">&nbsp;YES&nbsp;</span></label></li>
<li><label><input class="radio-input" name="radio01" type="radio" value="0"><span class="input_img n01">&nbsp;NO&nbsp;</span></label></li>
</ul>
</div>

請複製以上程式碼，並參考頂部和底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容；藍色背景的英文字，則為可替換的變數）

（※若在同一篇記事內，有使用不只一組的單選按鈕的話，請將第二組開始的name值，修改為其他名稱，例如第二組問題的按鈕為 name=”radio02″、第三組為 name=”radio03″，以此類推後續幾組，只要名稱不重複即可）

範例二：多選題

<div class="QA_BTN_MRQ">
<ul class="btn_list" data-color="lightBlue" data-widthratio="17">
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">臉部</span></label></li>
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">手掌</span></label></li>
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">手臂</span></label></li>
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">身體</span></label></li>
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">臀部</span></label></li>
<li><label><input class="radio-input" name="radio02" type="checkbox" value="0"><span class="input_img n01">腿部</span></label></li>
</ul>
</div>

請複製以上程式碼，並參考頂部和底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容；藍色背景的英文字，則為可替換的變數）

（※若在同一篇記事內，有使用不只一組的多選按鈕的話，請將第二組開始的name值，修改為其他名稱，例如name=”radio03″，以此類推後續幾組，只要不重複名稱即可）

範例三：多選題（按鈕換色，調整寬度比例）

<div class="QA_BTN_MRQ">
<ul class="btn_list" data-color="lightGreen" data-widthratio="40" data-sp-w="100">
<li><label><input type="checkbox" class="radio-input" name="radio02" value="0"><span class="input_img n01">維他命E仙人掌油</span></label></li>
<li><label><input type="checkbox" class="radio-input" name="radio02" value="0"><span class="input_img n01">泡泡碰到眼睛不刺痛</span></label></li>
<li><label><input type="checkbox" class="radio-input" name="radio02" value="0"><span class="input_img n01">頭、臉、髮全身一皂</span></label></li>
<li><label><input type="checkbox" class="radio-input" name="radio02" value="0"><span class="input_img n01">日本製造敏感肌適用</span></label></li>
<li><label><input type="checkbox" class="radio-input" name="radio02" value="0"><span class="input_img n01">6大無添加SGS認證</span></label></li>
</ul>
</div>

請複製以上程式碼，並參考頂部和底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容；有顏色背景的英文字，則為可替換的變數）

使用方式說明：

「傳統編輯器」和「區塊編輯器」有各自的加入方式，請擇一即可

並且勾選指定的模組，嵌入相對應的輔助程式碼

「區塊編輯器」：

． 請於左側的區塊工具欄中，選擇「自訂HTML」， 來新增上方欲使用的範例程式碼

「傳統編輯器」：

．請選擇「編輯HTML程式碼」，來新增上方欲使用的範例程式碼

．接著，請在編輯畫面的右側下方的TAG模組中（如下圖），找到「問答按鈕組合（單選多選）｜核取方塊｜按鈕開合」，並勾選它，才會將輔助上述功能的程式碼完全嵌入。

以上即可完成相關設定。若有遇到問題，請洽Kuroha。

data-color="lightGreen" // 按鈕顏色
data-widthratio="" // [電腦版] 按鈕的寬度比例（自動抓取文字長度）
data-widthratio="40" // [電腦版] 按鈕的寬度比例（根據指定數值） 
data-sp-w="100" // [手機版] 按鈕的寬度以滿版呈現

↓ 目前（點擊後）可替換的顏色 ↓

data-color=""; // 亮黃（預設）
data-color="lightBlue"; // 亮藍
data-color="lightGreen"; // 亮綠
data-color="lightRed"; // 亮紅