Javascript 如何关联函数和复选框？

我正在为任务管理器应用程序构建UI。我的页面上有一个按钮“获取所有任务”。当用户单击此按钮时，他将获得所有任务的列表。每个任务都有状态为“布尔完成=真/假”的复选框。当任务打印在页面上时，任务的每个复选框的状态都与任务的状态一致

当用户单击复选框时，然后向服务器发送ajax请求，该请求包含两个值：

id

任务和新值

done

但我有一个问题：当我点击change

done

status的复选框时，然后调用all复选框，而不是我点击的一个复选框

帮我解决这个问题。多谢各位

这是代码：

$(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);
                });
            }
        });
    });
});

$（文档）.ready（函数（）{
//按钮id。
$（“#获取所有任务但”）。单击（函数（）{
//servlet的URL。
$.ajax({
url:“获取所有任务”，
类型：“post”，
成功：功能（数据）{
var data=JSON.parse（数据）；
$。每个（数据、函数（键、值）{
//在此处将HTML插入DOM
var checkboxName='checkbox'+值['id']；
var checkboxValue=值['desc']；
var checkboxHtml=''；
$（“#所有#任务”）.append（checkboxHtml）；
});
$（'input[type=“checkbox”]）。on（'change'，函数（e）
{
//单击“此”和事件对象中的复选框的信息
//$（this）将复选框作为jQuery对象获取
log（'Send to server'，this，e）；
});
}
});
});
});

HTML

不要监听点击身体上的事件，而是监听复选框上的更改事件：

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); 
    });
}

成功：函数（数据）{
var data=JSON.parse（数据）；
$。每个（数据、函数（键、值）{
//在此处将HTML插入DOM
var checkboxName='checkbox'+值['id']；
var checkboxValue=值['desc']；
var checkboxHtml=''；
$（“#所有#任务”）.append（checkboxHtml）；
});
$（'input[type=“checkbox”]”）。在（'change'，函数（e）上
{
//单击“此”和事件对象中的复选框的信息
//$（this）将复选框作为jQuery对象获取
log（'Send to server'，this，e）；
});
}

可以通过类而不是

$（'input[type=“checkbox”]”）将复选框作为目标。

---

如果要测量值是否已更改，请不要使用单击事件。这就是更改事件的目的。

与其在正文上单击事件，不如在复选框上单击更改事件：

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); 
    });
}

成功：函数（数据）{
var data=JSON.parse（数据）；
$。每个（数据、函数（键、值）{
//在此处将HTML插入DOM
var checkboxName='checkbox'+值['id']；
var checkboxValue=值['desc']；
var checkboxHtml=''；
$（“#所有#任务”）.append（checkboxHtml）；
});
$（'input[type=“checkbox”]”）。在（'change'，函数（e）上
{
//单击“此”和事件对象中的复选框的信息
//$（this）将复选框作为jQuery对象获取
log（'Send to server'，this，e）；
});
}

可以通过类而不是

$（'input[type=“checkbox”]”）将复选框作为目标。

---

如果要测量值是否已更改，请不要使用单击事件。这就是更改事件的目的。

可能是因为您正在向文档中添加侦听器，而不是复选框本身：

var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.body.appendChild(checkbox); //you need to insert itin some point at the DOM tree

checkbox.addEventListener('click', function (e) {
     console.log('send to server');
});

---

可能是因为您正在向文档中添加侦听器，而不是复选框本身：

var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.body.appendChild(checkbox); //you need to insert itin some point at the DOM tree

checkbox.addEventListener('click', function (e) {
     console.log('send to server');
});

---

您可以在正文上使用带有选择器的jquery事件侦听器替换事件侦听器，然后将目标数据发送到服务器：

$('body').on('change', 'input[type="checkbox"]', function(e){
    console.log( $(e.target).val() );
}

---

您可以在正文上使用带有选择器的jquery事件侦听器替换事件侦听器，然后将目标数据发送到服务器：

$('body').on('change', 'input[type="checkbox"]', function(e){
    console.log( $(e.target).val() );
}

---

---

“”将选择输入类型为checkbox的所有元素，因此您只需要选择选中的div。是否也可以发布依赖的html代码？@Hameed Syed I addition html code.@Pavel是否可以在运行时获取浏览器源代码？属性id的值对于所有复选框都是相同的，这只不过是一个误会。“”将选择输入类型为checkbox的所有元素，因此您只需要选择选中的div。您是否也可以发布依赖的html代码？@Hameed Syed I addition html code.@Pavel是否可以在运行时获取浏览器源代码？属性id的值对于所有复选框都是相同的，这只是一个简单的说明。我得到：

uncaughttypeerror:checkbox.addEventListener不是place:
.addEventListener（'click'，function（e））的函数{
原因是checkbox只是一个字符串：var checkbox=''；我得到：
Uncaught TypeError:checkbox.addEventListener不是一个函数
用于place:
.addEventListener（'click'，function（e））的函数{
原因是复选框只是一个字符串：var checkbox=''；但是如何打印我的复选框？我需要一个变量来插入到foreach中。你是什么意思//在这里插入HTML到DOM中？DOM如何halp me？DOM代表文档对象模型，它是HTML所在的位置。我已经更新了我的答案，说明了如何将复选框添加到DOM中。我不是确定
值
变量中到底是什么，所以我根据复选框名称和值编了一些东西。当我单击“获取所有任务”时，我得到
未捕获类型错误：$（…）。on不是
的函数。'on（'change'，函数（e）
你确定你的某个地方没有打字错误吗？我发布的代码似乎工作正常：你能发布你的代码吗？我正在更新我的问题添加代码，我已经完成了