CODEWITHSUNDEEP
jqueryhtmlcss
Ramzan Mahmood
Ramzan Mahmood

Reputation: 1901

Apply class to 1st parent checkbox

I have group of check boxes that create with for each loop so i want to make 1st checkbox parent while other all should be child by clicking 1st one which is parent child check boxes should checked.

I have code to check but not as desired.

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

Suppose html is as

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

Now i want to apply class checkbox-all-index-1 to 1st checkbox of loop created check-boxes.

these above all checkboxes created via loop if i apply class to one it applies on all other so i want just for 1st one.

Thanks

Upvotes: 1

Views: 105

Answers (5)

Ehsan
Ehsan

Reputation: 12969

Try This:

$(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>

If you want when change any checkbox, see affect on first check box, so use this:

$(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>

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Do it like below:-

$('.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>

Upvotes: 1

Just code
Just code

Reputation: 13801

You can make parent like this and count child: 

$(".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);
  }
});
.group-selector-subscriber
{
  width:100%
}
<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">

Upvotes: 0

Shadow Fiend
Shadow Fiend

Reputation: 1829

try this.

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

Upvotes: 0

Yogen Darji
Yogen Darji

Reputation: 3300

Try something like that, Based on your question,

Add class checkbox-all-index-1 to first checkbox.

 
$('.group-selector-subscriber').click(function() {
  $('.group-selector-subscriber').first().addClass('checkbox-all-index-1')
});
<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">

Upvotes: 0

Related Questions