実現したいこと
チェック項目の数が多く選択された項目の商品を表示。
もし同数の場合は既存の「優先度」を第二判断基準として設定。
今の設定だとBとCを多く選択しても赤が優先に表示されてしまう。
ご教授いただけると幸いです。※javascript初心者
例)数が多く選択された場合は下記
A1+A2+B1→A (赤)の商品を表示
B1+B2+A1→B (青)の商品を表示
C1+C2+B2→C (黄)の商品を表示
例)同数の場合は下記
赤→優先度:高
青→優先度:中
黄→優先度:小
該当のソースコード HTML
<section id="question"> <ul> <li><label><input type="checkbox" name="checkbox01">C3</label></li> <li><label><input type="checkbox" name="checkbox07">A1</label></li> <li><label><input type="checkbox" name="checkbox05">B2</label></li> <li><label><input type="checkbox" name="checkbox02">C2</label></li> <li><label><input type="checkbox" name="checkbox08">A2</label></li> <li><label><input type="checkbox" name="checkbox06">B1</label></li> <li><label><input type="checkbox" name="checkbox03">C1</label></li> <li><label><input type="checkbox" name="checkbox04">B3</label></li> <li><label><input type="checkbox" name="checkbox09">A3</label></li> </ul> <p id="btn_question" class="btn_base"><a href="javascript:void(0)">押したら商品が表示(ボタン)</a></p> <!--question--> </section> <section id="red">赤商品</section> <section id="yellow">黄商品</section> <section id="blue">青商品</section> <section id="error"> <div class="error_inner"> <p class="btn_bk btn_base"><a href="javascript:void(0)">もう一度やり直す</a></p> </div> <!--error--> </section>
該当のソースコード JS
$(document).ready(function () { $("#btn_question").click(function () { searchMedicine(); }); $(".btn_bk").click(function () { backSearch(); }); }); function searchMedicine(){ $('#question').hide(); if($("[name=checkbox07]").prop("checked") || $("[name=checkbox08]").prop("checked") || $("[name=checkbox09]").prop("checked")){ $('#red').show(); } else if($("[name=checkbox05]").prop("checked") || $("[name=checkbox06]").prop("checked") || $("[name=checkbox04]").prop("checked")){ $('#blue').show(); } else if($("[name=checkbox01]").prop("checked") || $("[name=checkbox02]").prop("checked") || $("[name=checkbox03]").prop("checked")){ $('#yellow').show(); } else { $('#error').show(); } } function backSearch(){ $('#question').show(); $('#red').hide(); $('#blue').hide(); $('#yellow').hide(); $('#error').hide(); }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/22 01:10 編集