jquery勉強中です。
診断コンテンツ作成を試みているのですが、作り方がわからないのでどなたか助けていただけますでしょうか。
やりたいことは、項目を選択して次へボタンで次の質問に進むのですが、項目を選択する際、チェックボックスを使いたいです。
ようやく見つけたサンプルページがあるのですが、このような仕組みにチェックボックスを付けたいです。
下記サンプルページです。
https://b-risk.jp/blog/2022/04/yes-no-contents/
どなたかご教示くださいますと幸いです。
よろしくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちは
>項目を選択する際、チェックボックスを使いたいです。
選択は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>
fujillin様
とても詳しくご教授くださり、本当にどうもありがとうございます。
ラジオボタンとチェックボタンのそれぞれの使い用途の意味がわかりました。こちらの内容をふまえて2つ目に回答いただいた方の内容も理解することができました。
そうなると、デザイン的にはチェックボックスで見やすく作りたいと考えておりましたが、ミスディレクションになりかねないということも考慮して、作りながら検討してみたいと思います。
まずはいただいたソースを元に取り組ませていただきたく思います。
他の仕事をしつつなので、1ヶ月くらいかかる予定ですが、形になりましたらまたこちらの質問ページにてご報告させていただきます。
どうもありがとうございます。大変勉強になりました。
No.2
- 回答日時:
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 …
gura_様
ご回答くださりありがとうございます。
本当に勉強し始めで恐れ入りますが、見た目はチェックボックスにしたいのですが、仕組みはラジオボタンで見た目はチェックボックスというのはできますでしょうか?その場合cssでデザインをあてる感じなのでしょうか?
No.1
- 回答日時:
Jqueryでチェックをつける(選択状態にする)には
$("#id1").prop("checked", true);
です。
単純にチェックボックスを画面に起きたいということでしたら、jQueryではなくhtmlの方で
<input type="checkbox" id="id1">
でおけます。
kikyuuu様
早急なご回答ありがとうございます!
仕事の合間に試してみようと思います。
もしかしたらまた質問させていただくかもしれませんので、恐れ入りますが、もう少しの間まだ締め切らずにおかせていただきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- Access(アクセス) Accessで予定表を作成しようとしてます。 テーブル フィールド名 連番 オートナンバー型 年月日 2 2023/07/23 11:40
- Access(アクセス) チェックボックスにチェックが入った後の挙動 1 2022/08/21 12:39
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- その他(IT・Webサービス) google サイトの目次表示について 1 2023/06/17 23:24
- 迷惑メール・スパム gmailの過去のメールを一括削除する方法について 3 2023/04/19 05:27
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- 教えて!goo ベストアンサー、お礼の仕方教えてください。 ベストアンサーやお礼をしたくてもボタンが見つかりません。 2 2023/01/13 18:49
- Excel(エクセル) エクセルで指定したセルの増減ボタンを作りたい 2 2022/12/02 11:03
- YouTube YouTubeのコンテンツIDについて教えてください。 1 2022/05/18 08:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
EclipseでSpringを使用し、テー...
-
チェックボックスで合計値を計...
-
チェックボックスで指定したも...
-
checkboxをクリックしてリロー...
-
Objective-Cでチェックボックス...
-
JQuery Mobileでチェックボック...
-
JSP内で可変するチェックボック...
-
正規表現で複数マッチ条件で悩...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
<JavaScript>tableタグを入力不...
-
3桁区切りのカンマをつけたい...
-
【jQuery】input nameの文字列...
-
ラジオボタンのチェックが外れ...
-
JSのみで入力→確認→メールで送...
-
ラジオボタンと連動して文字列...
-
hiddenのvalueの値を変えたい
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
チェックボックスのON/OFFに応...
-
複数のチェックボックス項目が...
-
checkboxをクリックしてリロー...
-
チェックボックスの設定
-
チェックボックスで指定したも...
-
フォームのチェックボックスの...
-
チェックボックス
-
配列のチェックボックスをjavas...
-
一つのチェックボックスのON/OF...
-
スクリプト内でチェックボック...
-
チェックボックスに連動するテ...
-
特定のID(またはクラス)で括ら...
-
<input type="checkbox" checke...
-
チェックボックスが複数ある場...
-
チェックボックスに全てチェッ...
-
Nameは配列で、チェックされた...
-
チェックボックスとラジオボタ...
-
EclipseでSpringを使用し、テー...
おすすめ情報