複数のチェックボックスの値を取得した後、カンマの代わりに連番＆特定の文字をセットで表示させたい

Question

javascriptは初心者のため、解決策ご存じの方いらっしゃったらよろしくお願いいたします。

複数のチェックボックスの値を取得した後、
①値をHTMLに入れる（例：リンゴ,バナナ,オレンジ）
②カンマの代わりに、特定の文字をいれる
→特定の文字にチェックボックスで選択された数を値の隣にいれたい
（例：no1=リンゴ＆no2=バナナ＆no3=オレンジ＆no4=トマト）

実現したいこと

no1,2.3…（番号）を連番にしたいのですが、どうしても同じ数字になってしまい他の方法が思い浮かびません…

発生している問題・エラーメッセージ

リンゴ&no4バナナ&no4オレンジ&no4トマト&no4オレンジ

該当のソースコード

<label><input type="checkbox" name="hoge" value="リンゴ" />リンゴ</label>
<label><input type="checkbox" name="hoge" value="バナナ" />バナナ</label>
<label><input type="checkbox" name="hoge" value="オレンジ" />オレンジ</label>
<label><input type="checkbox" name="hoge" value="トマト" />トマト</label>
<p class="result4"></p>

$(function(){
  $('input[name=hoge]').on('change', function(){
	var cnt = $('input[name="hoge"]:checked').length;
    var vals = $('input[name=hoge]:checked').map(function(){
      return $(this).val();
    }).get().join('&prdno' + cnt);
    $('.result4').text(vals);
  });		
});

よろしくお願いいたします。

Comments

[yambejp]

「リンゴ」が「no1」だというのはどこを見て判断するのでしょうか？

Answer 1

たとえば、バナナ とトマト がチェックされているときに、以下の2通りが考えられます。

(1) no1=バナナ&no2=トマト とする。

$('input[name=hoge]').on('change', function(){  
  const vals = $('input[name=hoge]:checked').map(
    function(i) { return `no${i+1}=` + $(this).val(); }
  ).get().join('&');
  
  $('.result4').text(vals);  
});

(2) no2=バナナ&no4=トマト とする。

$('input[name=hoge]').on('change', function(){
  const vals = $('input[name=hoge]').map(
    function(i) { 
      return $(this).prop('checked') ? `no${i+1}=` + $(this).val() : null 
    }
  ).get().filter(e => e).join('&');
  
  $('.result4').text(vals);  
});

追記1

質問のタイトルが

複数のチェックボックスの値を取得した後、カンマの代わりに連番＆特定の文字をセットで表示させたい

となっており、「連番」とあることから(1) かなと思いましたが、(2) の可能性もある気がしたので両方回答しておきました。

追記2

もし要件が(2)である場合、すなわちクエリパラメータの値リンゴのキーはno1、バナナのキーはno2というように決まっているのであれば、
HTMLの各 <input> の属性を下記に修正するのもよいかもしれません。

<label><input type="checkbox" class="hoge" name="no1" value="リンゴ" />リンゴ</label>
<label><input type="checkbox" class="hoge" name="no2" value="バナナ" />バナナ</label>
<label><input type="checkbox" class="hoge" name="no3" value="オレンジ" />オレンジ</label>
<label><input type="checkbox" class="hoge" name="no4" value="トマト" />トマト</label>

このようにしておき、また JavaScript のほうでは jQuery の toArray() を使って要素の配列にして、
配列の map() メソッドを使うことにすると、以下のようにコードをより短く書けます。

$('.hoge').on('change', function(){
  const vals = $('.hoge:checked')
                .toArray()
                .map(e => `${e.name}=${e.value}`)
                .join('&');
  
  $('.result4').text(vals);  
});

追記3

参考までに、URLSearchParams を使うと、キーと値を = でつなげたり & でジョインするといった煩雑な文字列処理をすることなくクエリパラメータの文字列が得られます。例として追記2に挙げたHTMLに対してクエリパラメータを作るコードを挙げておきます。

$('.hoge').on('change', function(){
  const vals = new URLSearchParams(
    $('.hoge:checked').toArray().map(e => [e.name, e.value])
  );
  $('.result4').text(vals);  
});

ただしURLSearchParams を使ってクエリパラメータの文字列を作った場合、URLエンコードされたものになります。

• 使用例 👉 https://codepen.io/su507/pen/rNvNGER?editors=1010

Comments

[m_k]

お礼が遅くなり申し訳ありません…！
様々なパターンでご回答いただきありがとうございます！！
しっかりお伝えできていなかった部分でしたが、おっしゃる通り①のパターンを実装したかったのでとても助かりました。

さきほど取り急ぎ試してみたところ、問題解決いたしました！
自分では絶対に実装できなかったので、改めてゆっくりいただいた内容をみて勉強しようと思います；；
ありがとうございました！

Answer 2

とりあえず(1)はこんな感じです

<script>
document.addEventListener('change', e=>{
  const t=e.target;
  if(t.matches('[type=checkbox]')){
    document.querySelector('.result4').textContent=[...document.querySelectorAll('[type=checkbox]:checked')].map(x=>x.value).join(',');
  }
});
</script>
<label><input type="checkbox" name="hoge" value="リンゴ" />リンゴ</label>
<label><input type="checkbox" name="hoge" value="バナナ" />バナナ</label>
<label><input type="checkbox" name="hoge" value="オレンジ" />オレンジ</label>
<label><input type="checkbox" name="hoge" value="トマト" />トマト</label>
<p class="result4"></p>

(2)は条件がわからないので怪しいですがこんなかんじ

<script>
document.addEventListener('change', e=>{
  const t=e.target;
  if(t.matches('[type=checkbox]')){
    document.querySelector('.result4').textContent=[...document.querySelectorAll('[type=checkbox]:checked')].map(x=>`no${[...document.querySelectorAll('[type=checkbox]')].indexOf(x)+1}=${x.value}`).join('&');
  }
});
</script>
<label><input type="checkbox" name="hoge" value="リンゴ" />リンゴ</label>
<label><input type="checkbox" name="hoge" value="バナナ" />バナナ</label>
<label><input type="checkbox" name="hoge" value="オレンジ" />オレンジ</label>
<label><input type="checkbox" name="hoge" value="トマト" />トマト</label>
<p class="result4"></p>

Comments

[m_k]

お礼が遅くなり申し訳ありません…！
2パターンもご回答いただき本当にありがとうございました；；