jquery - 将类(class)套用至第一个父级复选框

我有一组为每个循环创建的复选框，因此我想使第1个复选框成为父级，而其他所有子项都应通过单击第一个复选框（即父子复选框）选中。

我有要检查的代码，但不是所需要的。

$('.checkbox-all-index-1').click(function () {
    if($(this).is(':checked')) {
        $('.checkbox-index').prop('checked', true);
    } else {
        $('.checkbox-index').prop('checked', false);
    }
});

假设html是

<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">
<input class="group-selector-subscriber checkbox-index" type="checkbox">

现在我想将类checkbox-all-index-1应用于循环创建复选框的第一个复选框。

这些首先通过循环创建的所有复选框，如果我将类应用到一个，它适用于所有其他，所以我只想第一个。

谢谢

最佳答案

像下面这样：

$('.group-selector-subscriber:nth-child(1)').click(function () {
  $(this).addClass('checkbox-all-index-1');
  if($(this).is(':checked')) {
    $(this).siblings().prop('checked', true);
  }else{
    $(this).siblings().prop('checked', false);
    $(this).removeClass('checkbox-all-index-1');
  }
});

.checkbox-all-index-1{
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>
<div>
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
  <input class="group-selector-subscriber checkbox-index" type="checkbox">
</div>