【Javascript】input type="checkbox"でcheckedになった数を計測し、type="radio"では回答に応じて点数を与え、合計値を算出したい

Question

input type="checkbox"でcheckedになった数を計測し、type="radio"では回答に応じて点数を与え、合計値を算出したい

<div class="q1">
  <p>Bobが好きな乗り物はなんでしょう？</p>
  <div>
    <input type="radio" id="bike" name="vehicle" value="1">
    <label for="bike">バイク（１点）</label>
  </div>
  <div>
    <input type="radio" id="scooter" name="vehicle" value="2">
    <label for="scooter">スクーター（２点）</label>
  </div>
  <div>
    <input type="radio" id="car" name="vehicle" value="3">
    <label for="car">車（３点）</label>
  </div>
  <div>
    <input type="radio" id="train" name="vehicle" value="1">
    <label for="train">電車（１点）</label>
  </div>
</div>

<div class="q2" hidden>
  <p>Bobが好きな色は何色でしょう？</p>
  <div>
    <input type="checkbox" id="black" name="color">
    <label for="black">黒</label>
  </div>
  <div>
    <input type="checkbox" id="white" name="color">
    <label for="white">白</label>
  </div>
  <div>
    <input type="checkbox" id="blue" name="color">
    <label for="blue">青</label>
  </div>
  <div>
    <input type="checkbox" id="yellow" name="color">
    <label for="yellow">黄色</label>
  </div>
</div>
<button id="select">ポイント獲得数</button>
</div>

document.getElementById('select').onclick = function() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    alert(checkboxes.length);
}

---

結果の例）
Q1
車を選択→3点
Q2
黒と白を選択→2点（各1点）

合計 5点

---

初心者なりに色々調べた結果、この方法だとinputのタイプに応じてチェックした数を計測できることがわかりました。
しかし、チェックした回答に応じて点数を数値化して与える方法がわかりません。
inputにvalueなどで対応できるのでしょうか？

また、他にも実装してみたい挙動があり、以下の通りです。
ご回答いただけるととても助かります。

チェック前の項目は非表示→チェック後次の項目のみを表示したい

例）
最初はQ1のみ表示→Q1が回答されたら自動でQ2が表示され、Q1は消える

buttonを使わずに、チェックを終えたら自動でチェックリストの下に合計点数に応じたコンテンツを表示したい

例）
チェックボックス 2個
ラジオボタンの得点 3点
合計 5点（「おめでとう！5点獲得です」という画像を表示する）
※コードや数値ではなく画像で表したい

Comments

[int32_t]

1つの質問で複数のことを聞くと回答を書く手間が増えるので、できるだけ1つのことだけ聞くようにしてください。

[shin12t]

わかりました！
ありがとうございます！

Answer 1

<style>
fieldset:not(.active){
display:none;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('fieldset .next')){
    const f=t.closest('fieldset');
    f.classList.remove('active');
    f.nextElementSibling.classList.add('active');
  }
  point.textContent=[...document.querySelectorAll('input:checked')].map(x=>Number(x.value)).reduce((x,y)=>x+y,0);
});
</script>
<form>
<fieldset class="active">
<legend>Bobが好きな乗り物はなんでしょう？</legend>
<ul>
<li><label><input type="radio" name="vehicle" value="1">バイク（１点）</label></li>
<li><label><input type="radio" name="vehicle" value="2">スクーター（２点）</label></li>
<li><label><input type="radio" name="vehicle" value="3">車（３点）</label></li>
<li><label><input type="radio" name="vehicle" value="1">電車（１点）</label></li>
</ul>
<input type="button" value="次へ" class="next">
</fieldset>
<fieldset>
<legend>Bobが好きな色は何色でしょう？</legend>
<ul>
<li><label><input type="checkbox" name="color" value="1">黒</label></li>
<li><label><input type="checkbox" name="color" value="1">白</label></li>
<li><label><input type="checkbox" name="color" value="1">青</label></li>
<li><label><input type="checkbox" name="color" value="1">黄色</label></li>
</ul>
<input type="button" value="次へ" class="next">
</fieldset>
<fieldset>
<legend>結果</legend>
<span id="point"></span>
</fieldset></form>

画像で処理

<style>
fieldset:not(.active){
display:none;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('fieldset .next')){
    const f=t.closest('fieldset');
    f.classList.remove('active');
    f.nextElementSibling.classList.add('active');
  }
  const num=[...document.querySelectorAll('input:checked')].map(x=>Number(x.value)).reduce((x,y)=>x+y,0);
  point.src=num+".jpg";
  point.alt=num;
});
</script>
<form>
<fieldset class="active">
<legend>Bobが好きな乗り物はなんでしょう？</legend>
<ul>
<li><label><input type="radio" name="vehicle" value="1">バイク（１点）</label></li>
<li><label><input type="radio" name="vehicle" value="2">スクーター（２点）</label></li>
<li><label><input type="radio" name="vehicle" value="3">車（３点）</label></li>
<li><label><input type="radio" name="vehicle" value="1">電車（１点）</label></li>
</ul>
<input type="button" value="次へ" class="next">
</fieldset>
<fieldset>
<legend>Bobが好きな色は何色でしょう？</legend>
<ul>
<li><label><input type="checkbox" name="color" value="1">黒</label></li>
<li><label><input type="checkbox" name="color" value="1">白</label></li>
<li><label><input type="checkbox" name="color" value="1">青</label></li>
<li><label><input type="checkbox" name="color" value="1">黄色</label></li>
</ul>
<input type="button" value="次へ" class="next">
</fieldset>
<fieldset>
<legend>結果</legend>
<img id="point" src="0.jpg" alt="0">
</fieldset>
</form>

Comments

[shin12t]

int32_tさんにご回答いただいたような
<input type="button" value="次へ" class="next">
を使わずに画面遷移することは可能ですか？
document.querySelector('.q1').addEventListener('change', e => {
document.querySelector('.q2').hidden = false;
});

また、下記のように得点の表示を画像で出し分けたいのですが、どうしたら良いでしょうか？
例）
得点 １〜３点＝img1
得点 ３〜４点＝img2
得点 ５点＝img3

[yambejp]

「次へ」を使わないというのは理論上ありえません
択一のラジオボタンならまだわかりますが、それでも選び直しができないのは
ユーザビリティが低いです。
ましてやチェックボックスは選んだ瞬間先にすすむと複数選べません

[shin12t]

そうですよね・・・。
画像の出し分けについてはいかがでしょうか？

[yambejp]

画像は最初から全点数分用意していて、点数にあわせた画像を表示すればいいのでは？
<span id="point"></span>を
<img src="0.jpg" id="point">のように変更し
point.textContentではなく、point.src=〇〇+".jpg"
のようにするとか

[shin12t]

javascript内で画像を複数枚指定するということでしょうか？

[yambejp]

> javascript内で画像を複数枚指定するということでしょうか？

ちょっとおっしゃっている意味がわかりかねます。
画像で表示するということは画像は質問者さんが用意するということですよね？
仮に命題の内容だと0～7点の画像が必要です（0.jpg、1.jpg・・・・、7.jpg）
点数にあわせてimgのsrcに指定する画像名を変更して表示してくださいということです。

[shin12t]

すみません・・・。
単純にpoint.src=〇〇+".jpg"で記述する際の全体的な記述方法がわからずでして・・・。
合計点数に応じた画像の変え方をコードで見せていただけないでしょうか？

[yambejp]

追記しました。これでわかりますか？
しつこいようですが必要な画像を用意するのは質問者さんですから

[shin12t]

＞しつこいようですが必要な画像を用意するのは質問者さんですから
はい、こちらは承知しております！
毎度質問の意図が分かりづらい投稿でもご回答いただき大変感謝しております・・・！

ありがとうございます！！！

Answer 2

チェックした回答に応じて点数を数値化

なんとかして選択肢と点数の対応付けが必要になりますね。
この質問のコードように選択肢が直接HTMLに書いてあるなら、点数もHTMLに含めてしまいましょう。下の例では data-point というカスタムデータ属性を足しています。集計するときは、チェックされている要素の data-point 属性の値を合計すればよいでしょう。

<input type="radio" id="bike" name="vehicle" value="2" data-point="1">
<label for="bike">バイク（１点）</label>
</div>
<div>
<input type="radio" id="scooter" name="vehicle" value="3" data-point="2">
<label for="scooter">スクーター（２点）</label>

選択肢が何かのデータから生成されるものなら、そのデータに点数も含めるといいです。

---

チェック前の項目は非表示→チェック後次の項目のみを表示したい

Q2 以降は最初から hidden 属性を付けておいて、Q1の選択肢で change イベントが起きたら Q2 の hideen 属性を消しましょう。

<div class="q2" hidden>

document.querySelector('.q1').addEventListener('change', e => {
  document.querySelector('.q2').hidden = false;
});

---

buttonを使わずに、チェックを終えたら自動でチェックリストの下に合計点数に応じたコンテンツを表示したい

documentなど、すべての選択肢の祖先となるノードでchangeイベントを監視して、そこで集計すればいいです。

document.addEventListener('change', e => {
  const checked = [...document.querySelectorAll('input:checked')];
  // checked 内の各 <input> の data-point 属性値を合計して、どこかに表示する
});