jquery 診断コンテンツにチェックボックスを付けたいです

締切済

質問者：h_6812_h
質問日時：2023/01/19 18:31
回答数：3件

jquery勉強中です。
診断コンテンツ作成を試みているのですが、作り方がわからないのでどなたか助けていただけますでしょうか。

やりたいことは、項目を選択して次へボタンで次の質問に進むのですが、項目を選択する際、チェックボックスを使いたいです。
ようやく見つけたサンプルページがあるのですが、このような仕組みにチェックボックスを付けたいです。
下記サンプルページです。
https://b-risk.jp/blog/2022/04/yes-no-contents/

どなたかご教示くださいますと幸いです。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

参考程度に

No.3

回答者： fujillin
回答日時：2023/01/21 22:05

こんにちは

＞項目を選択する際、チェックボックスを使いたいです。
選択は1つのみだと想像しますけれど、通常、チェックボックスは単独でON/OFFが可能で、複数選択も可能です。
ですので、ラジオボタンのように使うのは、ユーザーにとってミスディレクションになりかねません。

その上で、どうしてもチェックボックスにしたいのなら・・
1）HTMLではラジオボタンを用いておいて、CSSでチェックボックスのように見せる。
2）HTMLでチェックボックスを用い、javascriptでラジオボタンの様な挙動にする。
といった方法が考えられます。

以下は、2）の方法でのごく簡単な例です。
・他の用途のチェックボックスは存在しないものと仮定しています。
（存在する場合は、それを除外する処理を追記してください）
・fieldset内のチェックボックスを1単位として挙動します。
（fieldsetが複数あっても、それぞれの単位で動作します）
（checkboxがfieldsetの子孫要素でない場合は、エラーになります）

※ jQueryは用いていませんが、利用するなら適宜修正願います。
※ ご提示のページでは、要素idやクラス及びdata属性等が冗長ですが、以下では処理に必要な記載だけにしてありますので、必要なら追記してください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<fieldset style="border: 0;">
　<label><input type="checkbox" value="Yes">はい</label>
　<label><input type="checkbox" value="No">いいえ</label>
　<label><input type="checkbox" value="Neither">どちらでもない</label>
</fieldset>

<script>
document.addEventListener('click', e => {
const t = e.target;
if(t.nodeName != 'INPUT' || t.type != 'checkbox') return;
t.closest('fieldset').querySelectorAll('input[type="checkbox"]')
.forEach(e => {e.checked = (t==e)});
});
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様
とても詳しくご教授くださり、本当にどうもありがとうございます。
ラジオボタンとチェックボタンのそれぞれの使い用途の意味がわかりました。こちらの内容をふまえて2つ目に回答いただいた方の内容も理解することができました。
そうなると、デザイン的にはチェックボックスで見やすく作りたいと考えておりましたが、ミスディレクションになりかねないということも考慮して、作りながら検討してみたいと思います。
まずはいただいたソースを元に取り組ませていただきたく思います。
他の仕事をしつつなので、1ヶ月くらいかかる予定ですが、形になりましたらまたこちらの質問ページにてご報告させていただきます。
どうもありがとうございます。大変勉強になりました。

通報する

お礼日時：2023/01/21 22:58

No.2

回答者： gura_
回答日時：2023/01/20 22:00

h_6812_h さん

　････チェックボックスを使いたい･･･････

どれか一つを選択するときには、チェックボックスでなくラジオボタンを使います。

https://b-risk.jp/blog/2022/04/yes-no-contents/
の場合で言えば、

<button type="button" class="select yes">はい</button>
<button type="button" class="select no">いいえ</button>
<button type="button" class="select vague">どちらとも言えない</button>

の部分を、

<input type="radio" name="q1" class="select yes">はい
<input type="radio" name="q1" class="select no">いいえ
<input type="radio" name="q1" class="select vague">どちらとも言えない

のように変更します。

こちらをご参考に↓
https://ponk.jp/jquery/basic/quiz
https://www.nishishi.com/javascript-tips/radiobu …