我为任务管理器应用程序构建UI。我的页面上有一个Get all tasks按钮。当用户单击此按钮时，他会列出所有任务。每个任务都有状态为boolean done = true/false的复选框。并且当任务打印在页面上时，任务的每个复选框都具有与任务状态相对应的状态。
当用户单击复选框时，然后将ajax请求发送到服务器，该请求包含两个值：task id任务和新值done。
但是我有一个问题：当我单击更改状态done的复选框时，调用所有复选框，而不是我单击的一个复选框。
帮助我解决此问题。谢谢。
这是代码：
$(document).ready(function(){
//button id.
$("#get_all_task_but").click(function(){
// URL of servlet.
$.ajax({
url : 'get_all_tasks',
type : "post",
success : function (data) {
var data = JSON.parse(data);
$.each( data, function( key, value ) {
//insert HTML into DOM here
var checkboxName = 'checkbox'+value['id'];
var checkboxValue = value['desc'];
var checkboxHtml = '<input type="checkbox" name="'+checkboxName+'" value="'+checkboxValue+'" />';
$('#all_tasks').append(checkboxHtml);
});
$('input[type="checkbox"]').on('change', function(e)
{
//info on which checkbox is click in 'this' and the event object
//$(this) to get the checkbox as jQuery object
console.log('Send to server', this, e);
});
}
});
});
});
的HTML
<body>
<form id="result_from_server">
<input name="data" type="text">
<input type="submit" value="send">
</form>
<div id="resp"></div>
<div>
<input id="get_all_task_but" type="button" value="Get all task" />
<ul id="all_tasks">
</ul>
</div>
</body>
最佳答案
除了侦听主体上的click事件，还可以侦听复选框上的change事件：
success : function (data) {
var data = JSON.parse(data);
$.each( data, function( key, value ) {
//insert HTML into DOM here
var checkboxName = 'checkbox'+value['id'];
var checkboxValue = value['desc'];
var checkboxHtml = '<input type="checkbox" name="'+checkboxName+'" value="'+checkboxValue+'" />';
$('#all_tasks').append(checkboxHtml);
});
$('input[type="checkbox"]').on('change', function(e)
{
//info on which checkbox is click in 'this' and the event object
//$(this) to get the checkbox as jQuery object
console.log('Send to server', this, e);
});
}
也许通过类而不是
$('input[type="checkbox"]')定位复选框。如果要测量值是否已更改，请不要使用click事件。这就是更改事件的用途。