Question

我为任务管理器应用构建UI。我的页面上有一个按钮Get all tasks。当用户点击此按钮时，他会列出所有任务。每个任务都有状态为boolean done = true/false的复选框。当任务打印在页面上时，任务的每个复选框都根据任务状态具有状态。

当用户点击复选框时，然后向服务器发送ajax请求，其中包含两个值：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>

Answer 1

不要在正文上收听点击事件，而是在复选框上收听更改事件：

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"]')定位复选框。

如果您想衡量值是否已更改，请勿使用点击事件。这就是改变事件的用途。

Answer 2

也许是因为你要向doc添加一个监听器，而不是复选框本身：

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

Answer 3

你可以在body上使用jquery事件监听器和一个选择器来替换你的事件监听器然后将目标的数据发送到服务器：

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

如何关联功能和复选框？

3 个答案: