jquery 用于检查/取消选中复选框并传递参数答案

【问题标题】：jquery for check / uncheck checkbox and pass argumentjquery 用于检查/取消选中复选框并传递参数
【发布时间】：2015-05-20 12:57:51
【问题描述】：

我有一个任务列表，其中包含已完成/未完成任务的复选框。我正在努力实现它，因此当检查任务时，它使用 ajax 更新表以说明其已完成。反之亦然，untick 将发送一个命令将其从已完成更改为未完成。

该方法正在努力使用，但意识到我无法完全实现我想要的：

$taskid = 每个任务的唯一 ID。

'<input  type="checkbox" onclick="checkboxChecked('.$taskid.')" value="1" >'

当点击它时，它会调用以下函数（并将 taskid 传递给它）

function checkboxChecked(id)
{
var x = "task"+id;

$.ajax({
  method: "POST",
  url: "form_taskchecked.post.php",
  data: { action: "checked", 
          id: id }
})

.done(function( msg ) {
    //success
     $('#'+x).toggleClass("task-done");        


})
.fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
});


}

在我的服务器端，php 看起来像这样

if ($_POST['action'] == "checked") {
//SEND SQL TO LIST TASK AS COMPLETED

}
else if ($_POST['action'] == "unchecked") {
//SEND SQL TO LIST TASK AS NOT COMPLETED
}

当我到达这一点时，我意识到我需要一个用于 ajax 调用的函数，它会发送相同的详细信息，但操作为“未选中”。但是我该怎么做呢，如果我像这样使用事件处理程序，我不明白我如何（a）引用特定的复选框（我是否改为监听一个类并让所有复选框都有那个类？ ) 和 (b) 如何将 taskid 的值传递给它，这是 php 部分所需要的。

$('#myCheckBox').click (function ()
{
var thisCheck = $(this);
if (thischeck.is (':checked'))
{
   // ajax call for checked box
}


});

总而言之，我如何区分检查和取消检查并相应地发送 ajax 调用，并传递一个 ID 值。

【问题讨论】：

这和这个问题不一样吗？ stackoverflow.com/questions/30304829/… - 为复选框添加一个类，并为每个复选框赋予 taskid 的 id
更新您的 php 以接受 2 个参数 - 任务 ID 和完成状态 0|1 会更容易也更整洁。
我认为这是家庭作业 - 它与我回答的另一个问题相同
不知道你对家庭作业的意思。我查看了您的链接，但不幸的是，我无法弄清楚如何在我自己的上下文中应用它，这是一个略有不同的问题。 @user1514042 - 谢谢我接受了你的建议并这样做了。可能有一种更清洁的方法，但这对我来说是有意义的——我有 Onclick 传递 2 个变量，而 ajax /PHP 本质上是在这两种状态之间切换。当它成功返回时，我使用 jquery 在 2 个不同的 Onclick 命令之间切换（变量为 1 或 0）。

标签： php jquery ajax

【解决方案1】：

我对此的解决方案是将 php 改为接受 2 个变量。它将像这样在 2 个状态之间切换。

if ($_POST['completed'] == 0) { 
$query ="UPDATE PRJ_tasklist SET completed = 1 WHERE (taskno=".$_POST['id'].")";
$result = odbc_exec($con1, $query);

}
else if ($_POST['completed'] == 1) { 
    $query ="UPDATE PRJ_tasklist SET completed = 0 WHERE (taskno=".$_POST['id'].")";
    $result = odbc_exec($con1, $query);
}

Ajax 调用现在如下所示。在成功返回时，它会首先更改正在发送的 Onclick 事件。

function checkboxChecked(id,completed)
{
var x = "task"+id;

$.ajax({
  method: "POST",
  url: "form_taskchecked.post.php",
  data: { action: "checked", 
          id: id, 
          completed:completed //1 or 0
          }
})

 .done(function( msg ) {
    //success
     $('#'+x).toggleClass("task-done");
     $('#badgeicon'+id).toggleClass("hidden");
        //toggle the onclick function


         if (completed==1){
            $('#checkbox'+id).attr('onclick','checkboxChecked('+id+',0)');
         } else if (completed==0){
            $('#checkbox'+id).attr('onclick','checkboxChecked('+id+',1)');
         } 

})

.fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
});


}

【讨论】：