How to select all nested input siblings in Jquery onclick first element-CodePudding

I need to Checks all input those are inside labels on click "check-all" class. I have tried by nextAll() method but it's not working. kindly help

$('.check-all').click(function() {
  alert('asdasd');
  $(this).nextAll('input').prop('checked', 'true');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <a><img src="img/select_all.png"  /></a>
  <label >
             <input type="checkbox"  />
             <span >Ankit</span>
          </label>
  <label >
             <input type="checkbox"/>
             <span >Mohal</span>
          </label>
  <label >
             <input type="checkbox"/>
             <span >Kamal</span>
          </label>
</div>

<div >
  <a><img src="img/select_all.png"  /></a>
  <label >
             <input type="checkbox"  />
             <span >Ankit</span>
          </label>
  <label >
             <input type="checkbox"/>
             <span >Mohal</span>
          </label>
  <label >
             <input type="checkbox"/>
             <span >Kamal</span>
          </label>
</div>

CodePudding user response：

you can :

use closest method to get closest parent of check-all with class toggle-check-group
use find method to get all input child of toggle-check-group

if you want to check/uncheck all check bow with the .check-all elements

an idea can be to store the checked state of the first check box and apply it to all sibling ones

var isCheck = inputs.first().prop('checked');

$('.check-all').click(function() {
  var inputs = $(this).closest('.toggle-check-group').find('input');
  var isCheck = inputs.first().prop('checked');
  inputs.prop('checked', !isCheck);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <a><img src="img/select_all.png"  /></a>
  <label >
                 <input type="checkbox"  />
                 <span >Ankit</span>
              </label>
  <label >
                 <input type="checkbox"/>
                 <span >Mohal</span>
              </label>
  <label >
                 <input type="checkbox"/>
                 <span >Kamal</span>
              </label>
</div>

<div >
  <a><img src="img/select_all.png"  /></a>
  <label >
                 <input type="checkbox"  />
                 <span >Ankit</span>
              </label>
  <label >
                 <input type="checkbox"/>
                 <span >Mohal</span>
              </label>
  <label >
                 <input type="checkbox"/>
                 <span >Kamal</span>
              </label>
</div>