Флажок не возвращает правильное значение jquery / php
Я пытаюсь получить значение (true или false) флажка и обновить базу данных строки в функции while. Однако кажется, что флажки регистрируют изменение значения только в зависимости от первой строки. Например, если установлен флажок для строки 1, значение = true. Затем я могу щелкнуть следующие строки и получить значение флажка true. Однако, когда я нажимаю строки за первой строкой, чтобы получить false, он будет регистрироваться только в том случае, если сначала был снят флажок первой строки. Я думаю, что это как-то связано с идентификатором строки, но целую вечность пытался исправить это, но не могу это исправить. Пожалуйста помоги.
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;
}
}
Ответы 4
// Используйте this для ссылки на поле, по которому щелкают:
$(document).ready(function(){
$('input[type = "checkbox"]').on("click", function(){
var on = $(this).prop("checked");
$.post("work/updateaddress.php",{home:on,id:this.id});
});
});
Проблема заключается в том, что вы устанавливаете все флажки в обработчике кликов, а затем получаете доступ к prop() в этой коллекции, которая вернет только значение из первого.
Вместо этого используйте ключевое слово this для ссылки на флажок, который вызвал событие. Вы также должны использовать событие change вместо click по причинам доступности:
$('input[type = "checkbox"]').on('change', function(){
var on = $(this).prop("checked"); // or just this.checked
$.post("work/updateaddress.php", {
home: on,
id: this.id
});
});
Вы должны использовать событие change вместо события click для флажка.
$('input[type = "checkbox"]').on('change', function(){
var on = this.checked
console.info(on)
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "checkbox" value = "a">В качестве альтернативы вы можете использовать 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>
Без проблем. Не забудьте принять ответ, если он помог, - в том числе и на некоторые из ваших предыдущих вопросов.