Checkbox not returning the right value jquery/php

Question

I am trying to get the value (true or false) of a checkbox and update the database of a row in a while function. However, the checkboxes only seem to register a change of value depending on the first row. For example, if row 1 checkbox is checked, value = true. I can then click on the following rows and get checkbox value of true. However, when I click rows beyond the first row to get false, it will only register if the first row checkbox was unchecked first. I think it's something to do with the row id but tried for ages to fixed this but can't fix it. Please help.

HTML/PHP

while($row = $result->fetch_assoc()) {

echo
'
<input type="checkbox" name="home['.$row["id"].']" id="'.$row["id"].'" '.($row["home"]>0 ? 'checked="checked"' : '').'>
            <label for="'. $row["id"].'"></label>

JQUERY

$(document).ready(function(){
    $('input[type="checkbox"]').on("click", function(){
        var on = $('input[type="checkbox"]').prop("checked");
        $.post("work/updateaddress.php",{home:on,id:this.id});
            });
        });

PHP/MYSQL

  if ($home == 'true') {
  $check = date("Ymd");
} else {
  $check = '';
}
if(isset($_POST["home"])) {
  $sql = "UPDATE addresses SET home='$check' WHERE id='$id'";
  if($mysqli->query($sql) === TRUE){
         } else {
      echo "error" . $sql . "<br>".$mysqli->error;
    }
  }

Rory McCrossan · Accepted Answer · 2018-06-14 13:11:32Z

5

The issue is because you're selecting all the checkboxes in the click handler and then accessing prop() on that collection, which will only return the value from the first one.

Instead, use the this keyword to reference the checkbox which raised the event. You should also use the change event instead of click for accessibility reasons:

$('input[type="checkbox"]').on('change', function(){
  var on = $(this).prop("checked"); // or just this.checked
  $.post("work/updateaddress.php", {
    home: on,
    id: this.id
  });
});

answered Jun 14, 2018 at 13:11

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

No problem. Don't forget to accept an answer if it helped - on some of your previous questions too.

Adder · Accepted Answer · 2018-06-14 13:11:18Z

0

//Use this to refer to the box being clicked:

$(document).ready(function(){
    $('input[type="checkbox"]').on("click", function(){
        var on = $(this).prop("checked");
        $.post("work/updateaddress.php",{home:on,id:this.id});
    });
});

answered Jun 14, 2018 at 13:11

Adder

5,8982 gold badges35 silver badges60 bronze badges

Comments

Sujan Gainju · Accepted Answer · 2018-06-14 13:22:16Z

0

You should be using change event instead of click event for the checkbox.

$('input[type="checkbox"]').on('change', function(){
  var on = this.checked
  console.log(on)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="a">

answered Jun 14, 2018 at 13:22

Sujan Gainju

4,7872 gold badges16 silver badges37 bronze badges

Comments

user2560539 · Accepted Answer · 2018-06-14 13:39:34Z

0

Alternatively to change you could use input

$('input[type="checkbox"]').on('input', function(e){
  let thisCheckbox = e.target.checked
  alert(thisCheckbox)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="row1" id="row1" checked="checked">
            <label for="row1">row1</label>

answered Jun 14, 2018 at 13:39

user2560539

Collectives™ on Stack Overflow

Checkbox not returning the right value jquery/php

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related