CODEWITHSUNDEEP
javascriptjquery
cpeddie
cpeddie

Reputation: 799

jquery not returning elements with classname

I'm trying to implement a toggle all function on a set of checkboxes. That is, if the toggle all checkbox is checked, then check all of the checkboxes in the formgroup. Here's the HTML:

<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

The javascript I'm using is:

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input[class='.form-check-input.tailID_checkbox']"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input[class='.form-check-input.tailID_checkbox']"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});

I'm capturing the toggle of the toggle all checkbox fine, but when I try and iterate thru the other checkboxes, nothing is returned for the jquery $.each function. Is there some special way I need to find the class?

Upvotes: 2

Views: 49

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

Please use class = 'form-check-input tailID_checkbox' instead of .classname

   $("input[class='form-check-input tailID_checkbox']")

code sample - https://codepen.io/nagasai/pen/OvRrYo

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input[class='form-check-input tailID_checkbox']"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input[class='form-check-input tailID_checkbox']"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

Option 2:

Use other option getting checkboxes by classname 

$.each( $(".form-check-input"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });

code sample - https://codepen.io/nagasai/pen/zWKeOB

Only issue observed from your code is that you are trying to combine both ways of getting checking boxes by classname

$('.className') and $('input[class='className']')

Upvotes: 1

Andrey Petrov
Andrey Petrov

Reputation: 114

Just change the syntax you use to select element from input[class='.form-check-input.tailID_checkbox'] to input.form-check-input.tailID_checkbox.

Run this demo to see it works:

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input.form-check-input.tailID_checkbox"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input.form-check-input.tailID_checkbox"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

Upvotes: 1

Related Questions