Question

我有一组为每个循环创建的复选框，所以我想创建第一个复选框parent，而其他all都应该是child，通过单击1st parent，这是父子复选框应该检查。

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

$('.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应用于循环创建的复选框的第一个复选框。

这些以上所有复选框都是通过循环创建的，如果我将类应用于所有其他类的一个，所以我只想要第一个。

谢谢

Answer 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>

Answer 2

根据您的问题尝试类似的事情，

将班级checkbox-all-index-1添加到第一个复选框。

＆＃13;

 
$('.group-selector-subscriber').click(function() {
  $('.group-selector-subscriber').first().addClass('checkbox-all-index-1')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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">

＆＃13;

Answer 3

尝试this。

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

Answer 4

您可以像这样制作父母并计算孩子：

＆＃13;

$(".group-selector-subscriber:first").click(function(e)
{   
   if($(".group-selector-subscriber:first").is(":checked"))
   {
      $(".group-selector-subscriber").prop("checked",true)
   }
   else
   {
      $(".group-selector-subscriber").prop("checked",false)
   }
});

$(".group-selector-subscriber:not(:first)").click(function()
{
  if($('.group-selector-subscriber:not(:first):checked').length===$('.group-selector-subscriber:not(:first)').length)
  {
     $(".group-selector-subscriber:first").prop("checked",true);
  }
  else
  {
     $(".group-selector-subscriber:first").prop("checked",false);
  }
});

＆＃13;

.group-selector-subscriber
{
  width:100%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">

＆＃13;

Answer 5

试试这个：

$(document).ready(function(){
  $('.group-selector-subscriber:nth-of-type(1)').change(function(){
    $(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
    $(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
  })
})

$(document).ready(function(){
  $('.group-selector-subscriber:nth-of-type(1)').change(function(){
    $(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
    $(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
  })
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>

如果您想要更改任何复选框，请参阅第一个上的效果复选框，因此请使用此选项：

$(document).ready(function(){

  $('.group-selector-subscriber:nth-of-type(1)').change(function(){
    $(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
    $(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
  })

 $('.group-selector-subscriber').change(function(){
    var isCheck = true;
    $(this).closest('div').children('.group-selector-subscriber').not(':nth-of-type(1)').each(function(){
      if(!$(this).prop('checked'))
        isCheck = false;
    })
    $(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').toggleClass('checkbox-all-index-1',isCheck);
    $(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').prop('checked',isCheck);
  })

})

$(document).ready(function(){

  $('.group-selector-subscriber:nth-of-type(1)').change(function(){
    $(this).nextAll('.group-selector-subscriber').prop('checked',$(this).prop('checked'));
    $(this).toggleClass('checkbox-all-index-1',$(this).prop('checked'));
  })

 $('.group-selector-subscriber').change(function(){
    var isCheck = true;
    $(this).closest('div').children('.group-selector-subscriber').not(':nth-of-type(1)').each(function(){
      if(!$(this).prop('checked'))
        isCheck = false;
    })
    $(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').toggleClass('checkbox-all-index-1',isCheck);
    $(this).closest('div').children('.group-selector-subscriber:nth-of-type(1)').prop('checked',isCheck);
  })
 
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>

将类应用于第一个父复选框

5 个答案: