jQueryで親要素を指定して繰り返し処理させたい

Question

次のようなHTMLを組んでおります。

<ul class="list">
  <li>
    <div>
      <p>製品A</p>
      <ul>
        <li><label><input type="checkbox" name="nameA[]" value="A-1">製品A-1</label></li>
        <li><label><input type="checkbox" name="nameA[]" value="A-2">製品A-2</label></li>
        <li><label><input type="checkbox" name="nameA[]" value="A-3">製品A-3</label></li>
        <li><label><input type="checkbox" name="nameA[]" value="A-4">製品A-4</label></li>
      </ul>
    </div>
  </li>
  <li>
    <div>
      <p>製品B</p>
      <ul>
        <li><label><input type="checkbox" name="nameB[]" value="B-1">製品B-1</label></li>
        <li><label><input type="checkbox" name="nameB[]" value="B-2">製品B-2</label></li>
        <li><label><input type="checkbox" name="nameB[]" value="B-3">製品B-3</label></li>
        <li><label><input type="checkbox" name="nameB[]" value="B-4">製品B-4</label></li>
      </ul>
    </div>
  </li>
</ul>

checkboxで何か選択されたとき、同じ製品内で選ばれているすべての要素を<p>タグ内に書き換えたいと思っています。
例えば、製品B-2と製品B-3が選ばれたら「製品B-2,製品B-3」と<p>製品B</p>のところを書き換えます。

そこで、以下のように書いてみました。

	$('ul.list label').on("click", function(){
		var buf="";
		$(this).parent('li').each(function(index, element){
			if($('input[type="checkbox"]', element).prop("checked")){
				if( buf ){ buf=buf + ','; }
				buf += $(element).text();
			}
		});
		console.log(buf);
	});

選択した値は取得できるのですが、すでに選ばれているものが引用できません。
eachの部分がparentで指定しているので親要素だけのliを見ているのかなと考えているのですが、どのように書けば他のli要素も見に行くでしょうか。

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

Answer 1

どのように書けば他のli要素も見に行くでしょうか。

もう一つ上のulまでさかのぼってから、改めてliを探せば良いと思います。その場合、parent()だとマズいので、closest()を使いましょう。

$(this).closest('ul').find('li').each(function(index, element){
  ...

あと、いまはlabel要素のclickイベントにハンドラを仕込んでますが、それだと、クリックした箇所(チェックボックスの四角か、ラベル部分か)によって挙動が変わってしまう可能性があるので、チェックボックスのchangeイベントに仕込んだ方が良いかもしれません。

$('input[type=checkbox]').on('change', function(){
  ...

Comments

[umioyo]

ありがとうございました。
closestは知らなかったので勉強になりました。
イベントハンドラの件もご指摘ありがとうございます。まさにその通りですね。

Answer 2

$(function(){
  $('p').attr('data-default',function(){return $(this).text();});
  $('[name="nameA[]"],[name="nameB[]"]').on('change',function(){
    var text=$('[name="'+$(this).attr('name')+'"]:checked').map(function(){
      return $(this).closest('label').text();
    }).get().join(',');
    $(this).closest('div').find('p').text(text||function(){return $(this).data('default')});
  });
});

Comments

[umioyo]

ありがとうございます。
試してみたいと思います。