CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Anu
Anu

Reputation: 1129

How to get value of checked dynamic checkboxes

I have the following checkboxes getting from database

while($result = mysqli_fetch_array($query)){
    $srNumber = $result['srNumber'];
    $oaName = $result['oaName'];
    echo '
        <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="'.$oaName.'"></td>
        <td>'.$oaName.'</td>
        </tr>';
}

And have the following code to get the value of those checked checkboxes

< script >
  $(document).ready(function() {
    $(".checkBoxes").click(function() {
      if ($(this).is(":checked")) {
        var searchIDs = $(".checkBoxes").map(function() {
          return $(this).val();
        }).get();
        alert(searchIDs);
      }
    });
  }); 
< /script >

Problem

My problem is, it always getting value of all checkboxes no matter it is checked or not. May I know how to get only the checked boxes value?

Upvotes: 2

Views: 918

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use the :checked selector to retrieve only the checkboxes which have been selected. Also note that you should use the change event when dealing with checkbox and radio inputs. Try this:

$(".checkBoxes").change(() => {
  let searchIDs = $(".checkBoxes:checked").map((i, cb) => cb.value).get();
  console.log(searchIDs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name1" id="name1" /></td>
    <td><label for="name1">Name1</label></td>
  </tr>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name2" id="name2" /></td>
    <td><label for="name2">Name2</label></td>
  </tr>
  <tr>
    <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="Name3" id="name3" /></td>
    <td><label for="name3">Name3</label></td>
  </tr>
</table>

Upvotes: 1

vekay
vekay

Reputation: 46

Hi @Anu if you need as mentioned "I only need to get the value when someone clicked on those checkboxes and checked. Thanks for the effort though"

$(document).ready(function() {
  let element = $(".checkBoxes");
  element.click(function(e) {
    if (!$(this).is(":checked")) return; // checks for currently clicked
    element.each(function(e) {
      if ($(this).is(":checked")) {
        console.log($(this).val());
      }
    });
  });
});

Upvotes: 0

Mahesh S
Mahesh S

Reputation: 395

You can try this:

<!DOCTYPE html>
<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).on('click','.checkbox',function(){
    $('.checkbox').each((index, chk)=>{
    console.log($(chk).is(':checked'));
    });
});
</script>
<body>
<form action="/action_page.php" method="get">
  <input type="checkbox" class="checkbox" name="vehicle" value="1">1<br>
  <input type="checkbox" class="checkbox" name="vehicle" value="2">2<br>
  <input type="checkbox" class="checkbox" name="vehicle" value="3">3<br>
  <input type="checkbox" class="checkbox" name="vehicle" value="4">4<br>
</form>

</body>
</html>

Upvotes: 0

Deepak A
Deepak A

Reputation: 1636

Use is(':checked') to check if it is checked and each to loop through all checkboxes of class checkBoxes

$('.getvalue').click(function(e){

    $('.checkBoxes').each(function(e){
        if($(this).is(':checked'))
        {
            console.log($(this).val())
        
        }
    
    })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "checkbox" value="1" class="checkBoxes">One
<input type = "checkbox" value="2" class="checkBoxes">Two
<input type = "checkbox" value="3" class="checkBoxes">Three
<input type = "checkbox" value="4" class="checkBoxes">Four

<button class="getvalue">Check</button>

Upvotes: 0

Eddie
Eddie

Reputation: 26844

You can use $(".checkBoxes:checked") selector to get the checked checkboxes.

$(document).ready(function() {
  $(".checkBoxes").click(function() {
    if ($(this).is(":checked")) {
      var searchIDs = $(".checkBoxes:checked").map(function() {
        return $(this).val();
      }).get();
      console.log(searchIDs);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="1" checked>
<input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="2">
<input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="3" checked>
<input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="4">

Upvotes: 3

Related Questions