jQueryで複数のチェックボックスをまとめてチェックするチェックボックスが複数ある場合の書き方

Question

以下のようなHTMLがあるとします。

##やりたいこと

各<ul>配下の「全選択/全解除」のチェックボックスをチェックすると、その<ul>配下のチェックボックスがまとめて選択または選択解除されるものを作りたい。

<form id="form">
  <ul id="id1">
    <li><label><input type="checkbox" class="checkall">全選択/全解除</label></li>
    <li><label><input type="checkbox" value="1">あああ</label></li>
    <li><label><input type="checkbox" value="2">いいい</label></li>
  </ul>
  <ul id="id2">
    <li><label><input type="checkbox" class="checkall">全選択/全解除</label></li>
    <li><label><input type="checkbox" value="3">かかか</label></li>
    <li><label><input type="checkbox" value="4">ききき</label></li>
  </ul>
  <ul id="id3">
    <li><label><input type="checkbox" class="checkall">全選択/全解除</label></li>
    <li><label><input type="checkbox" value="5">さささ</label></li>
    <li><label><input type="checkbox" value="6">ししし</label></li>
  </ul>
</form>

上記例で<ul>のidは「id1」「id2」「id3」というように連番になっていますが、やりたいこととしては

• <ul>の数はその時によって異なる
• <ul>についているid名の「idXX」の数字部分は連番ではなくランダムに1～3桁の数字

といったことが条件です。

##やってみたこと

こうすれば<ul id="id1">だけは実現できることは分かっています。

$('#id1 .checkall').on('change', function(){
  $('#id1 input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

効率的な書き方を教えていただけますでしょうか。

Answer 1

$(function(){
  $('.checkall').on('change',function(){
    $(this).closest('li').siblings().find(':checkbox').prop('checked',$(this).prop('checked'));
  });
});

Answer 2

効率的かはともかく、こんなのでどうでしょう。

$(function () {
  $('#form > ul').on('change', 'input.checkall', function () {
    const $this = $(this);
    $this.closest('li')
      .siblings()
      .find('input')
      .prop('checked', $this.prop('checked'));
  });
});

上記は id に依存しない書き方なので、必要に応じて $this.closest('ul[id^="id"]').children('li') などに置き換えてもいいでしょう。

Comments

[singlestroke]

ありがとうございました。