• Mizuki / チャット隊長

    メンバー
    2023年9月5日 16:10

    複数回答を単一回答にする方法を案内させていただきます!

    【修正方法:例Q1】

    HTMLの「type=”checkbox”」を「type=”radio”」に変更してください!

    Q1では「type=”checkbox”」が5箇所あります!


    【変更前】

    <div class="auto-chat-item">
    <div class="answer-box">
    <div class="title right">(いくつでも選択可)</div>
    <ul class="choices active" data-total="" data-min="" data-max="">
    <li class="choices-item"><input id="q1-1" type="checkbox" name="q1">
    <label for="q1-1">
    選択肢1のテキスト<br>改行のテキスト
    </label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-2" type="checkbox" name="q1"><label for="q1-2">選択肢2のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-3" type="checkbox" name="q1"><label for="q1-3">選択肢3のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-4" type="checkbox" name="q1"><label for="q1-4">選択肢4のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-5" type="checkbox" name="q1"><label for="q1-5">選択肢5のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    </ul>
    <div class="total-poll"></div>
    <div class="select-show-btn">選択を完了する</div>
    </div>
    </div>

    【変更後】

    <div class="auto-chat-item">
    <div class="answer-box">
    <div class="title right">(いくつでも選択可)</div>
    <ul class="choices active" data-total="" data-min="" data-max="">
    <li class="choices-item"><input id="q1-1" type="radio" name="q1">
    <label for="q1-1">
    選択肢1のテキスト<br>改行のテキスト
    </label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-2" type="radio" name="q1"><label for="q1-2">選択肢2のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-3" type="radio" name="q1"><label for="q1-3">選択肢3のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-4" type="radio" name="q1"><label for="q1-4">選択肢4のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    <li class="choices-item"><input id="q1-5" type="radio" name="q1"><label for="q1-5">選択肢5のテキスト</label>
    <div class="result">
    <div class="progress"><span data-num=""></span></div>
    <div class="poll">
    <p class="total" data-num="">投票数</p>
    <p class="rate" data-num="">投票率</p>
    </div>
    </div>
    </li>
    </ul>
    <div class="total-poll"></div>
    <div class="select-show-btn">選択を完了する</div>
    </div>
    </div>