How to check and uncheck all of specific accordion only?

user_12428848 0
Viewed 110

Here I have a dynamic list of accordion. Inside accordion there are checkboxes. I want to check all the checkboxes of only particular accordion if check all is clicked. Now it is checking checkbox from all accordion if all is clicked.

html

{% for u in users %}
 <div>
  <a data-toggle="collapse" data-target="#collapse{{u.id}}" aria-expanded="false" aria-controls="collapse">
   {{u.name}}</a>
</div>


 <div id="collapse{{u.id}}" class="collapse" aria-labelledby="one" data-parent="#accordion">
 <div class="col-3">
    <div class="my-checkbox">
       <input type="checkbox" name='all'  class="all" id="check{{u.id}}">
     <label class="custom-control-label" for="check{{u.id}}">Check All</label>
      </div>
    </div>
 <div class="col-3">
    <div class="my-checkbox">
       <input type="checkbox" name='all'  class="all" id="check{{u.id}}">
     <label class="custom-control-label" for="check{{u.id}}">One check</label>
      </div>
    </div>
 <div class="col-3">
    <div class="my-checkbox">
       <input type="checkbox" name='all'  class="all" id="check{{u.id}}">
     <label class="custom-control-label" for="check{{u.id}}">Two check</label>
      </div>
    </div>
 </div>      
 {% endfor %}

script

$('.all').click(function(event) {   
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});
html jquery javascript
1 Answers

You can use $(this).closest(".collapse").find(':checkbox') to find all checkbox inside that div and make them check/uncheck.

Demo Code :

$('.all').click(function(event) {
  var this_ = this
  //get closest collpse class and find all checkbox inside it
  var selector = $(this).closest(".collapse").find(':checkbox').not(this)
  selector.each(function() {
    this.checked = this_.checked ? true : false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="collapse1" class="collapse" aria-labelledby="one" data-parent="#accordion">
  <div class="col-3">
    <div class="my-checkbox">
      <input type="checkbox" name='all' class="all" id="check{{u.id}}">
      <label class="custom-control-label" for="check1">Check All</label>
    </div>
  </div>
  <div class="col-3">
    <div class="my-checkbox">
    <!--remove that all class from other checkboxes.. also remove duplicate ids..=--->
      <input type="checkbox" name='all'>
      <label class="custom-control-label" for="check1">One check</label>
    </div>
  </div>
  <div class="col-3">
    <div class="my-checkbox">
      <input type="checkbox" name='all'>
      <label class="custom-control-label" for="check1">Two check</label>
    </div>
  </div>
</div>

<div id="collapse2" class="collapse" aria-labelledby="one" data-parent="#accordion">
  <div class="col-3">
    <div class="my-checkbox">
      <input type="checkbox" name='all' class="all" id="check2">
      <label class="custom-control-label" for="check1">Check All</label>
    </div>
  </div>
  <div class="col-3">
    <div class="my-checkbox">
      <input type="checkbox" name='all'>
      <label class="custom-control-label" for="check2">One check</label>
    </div>
  </div>
  <div class="col-3">
    <div class="my-checkbox">
      <input type="checkbox" name='all'>
      <label class="custom-control-label" for="check2">Two check</label>
    </div>
  </div>
</div>

user_106064000
Related