[英]How do I get the value of a checkbox on click
I have an html table with a checkbox created dynamically on each row. 我有一个html表,其中每行动态创建一个复选框。 The checked status of the checkbox is set based on a value in the database.
复选框的选中状态是根据数据库中的值设置的。 When the checkbox is checked in the html table, I need to catch the change and set the value so that if the box is checked, value=1 else value=0.
当在html表中选中此复选框时,我需要捕获更改并设置值,以便如果选中此框,则value = 1,否则为value = 0。 Value is passed to the update query.
值传递给更新查询。 I'm not sure how to accomplish this with my current code.
我不确定如何使用当前代码完成此操作。
HTML: HTML:
<?php
$sqlGetEmployees = "select e.employeeID, e.lastName, e.firstName, l.number, p.name, e.gradeCertLevel, e.serviceYears, e.step, e.certified from employee e join location l on l.locationID = e.locationID join position p on p.positionID = e.positionID";
$stmtGetEmployees = mysqli_prepare($db,$sqlGetEmployees);
mysqli_stmt_execute($stmtGetEmployees);
mysqli_stmt_bind_result($stmtGetEmployees, $id, $lastName, $firstName, $number, $name, $gradeCertLevel, $serviceYears, $salaryStep, $certified);
$count = 1;
while(mysqli_stmt_fetch($stmtGetEmployees))
{
$checkedCertified = ($certified == '1') ? 'checked="checked"':'';
?>
<tr>
<!-- other table data -->
<td>
<div id='certified_<?php echo $id; ?>'>
<input contentEditable='true' class='edit' type='checkbox' id='certified' <?php echo $checkedCertified; ?> />
</div>
</td>
</tr>
<?php
$count ++;
}
mysqli_stmt_close($stmtGetEmployees);
?>
Script: 脚本:
// Add Class
$('.edit').click(function(){
$(this).addClass('editMode');
});
// Save data
$(".edit").focusout(function(){
$(this).removeClass("editMode");
var id = this.id;
var split_id = id.split("_");
var field_name = split_id[0];
var edit_id = split_id[1];
var value = $(this).text();
$.ajax({
url: 'update.php',
type: 'post',
data: { field:field_name, value:value, id:edit_id },
success:function(response){
console.log('Save successfully');
}
});
});
update PHP 更新PHP
$field = $_POST['field'];
$value = $_POST['value'];
$editid = $_POST['id'];
$checkedStatus = $_POST['checked'];
if($field == "certified")
{
$sqlUpdateCertified = "UPDATE employee SET ".$field."=? WHERE employeeID= ?";
$stmtUpdateCertified = mysqli_prepare($db,$sqlUpdateCertified);
mysqli_stmt_bind_param($stmtUpdateCertified, "ss",$checkedStatus,$editid);
mysqli_stmt_execute($stmtUpdateCertified);
mysqli_stmt_close($stmtUpdateCertified);
}
For dynamically created elements events are handled like this: 对于动态创建的元素,事件的处理方式如下:
$(document).on('click', '.edit', function(e) {
//e.preventDefault();
var checkedStatus = 0;
if ($(this).is(':checked')) {
$(this).addClass('editMode');
checkedStatus = 1;
} else {
checkedStatus = 0;
$(this).removeClass("editMode");
}
var id = this.id;
var split_id = id.split("_");
var field_name = split_id[0];
var edit_id = split_id[1];
var value = $(this).text();
$.ajax({
url: 'update.php',
type: 'post',
data: { field:field_name, value:value, id:edit_id, checked: checkedStatus },
success:function(response){
console.log('Save successfully');
}
});
});
To put everything in a single event handler you can either put everything in .click or .focusout depending on what you are trying to achieve. 要将所有内容放在单个事件处理程序中,可以根据要实现的目的将所有内容都放在.click或.focusout中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.