按下按钮后复选框状态不会改变

Question

我有一个按钮，当它被按下时，它会调用一个带有一些参数的 ajax 函数，然后 ajax 会在数据库上发布一些值。用户在离开应用程序或刷新页面之前可能会多次使用此表单。到目前为止，这很好用！

在上次更新中，我添加了一个复选框，该复选框将使用上述 ajax 函数保存我希望保存在数据库中的另一条信息。因此，当按下按钮时，我会检查复选框是否被选中，然后将 true 或 false 发送给 ajax 函数。到目前为止，这也很有效！

不过，不能很好地工作的是，最后一个功能仅在第一次时才能正常工作！每隔一次用户点击按钮，无论复选框选中状态是什么，它都会提交第一次的状态。就像第一次按下按钮后 checkbox.checked 属性冻结一样。

这可能无关紧要，但我也尝试过使用切换按钮，但我遇到了同样的问题！

你知道如何克服这个问题吗？

非常感谢！

代码如下： 表单：它有1个切换按钮和3个调用sendTask函数的按钮。

<button type='button' class='btn btn-info' data-toggle='button' style='margin-top: 5px; width: 216px; height: 40px;' name='yesterday".$category['id']."' id='yesterday".$category['id']."'>This one was yesterday!</button></div>
            <button class='btn btn-".$buttoncolor."' id='btn-spec-small' type='button' onClick='sendTask(".$category['id'].", &#39;1&#39;, yesterday".$category['id'].")'>0-15min</button>
            <button class='btn btn-".$buttoncolor."' id='btn-spec-small' type='button' onClick='sendTask(".$category['id'].", &#39;2&#39;, yesterday".$category['id'].")'>15-60min</button>
            <button class='btn btn-".$buttoncolor."' id='btn-spec-small' type='button' onClick='sendTask(".$category['id'].", &#39;3&#39;, yesterday".$category['id'].")'>60+min</button>

sendTask 函数：

function sendTask(category, weight, checkbox){
    var ieri = $(checkbox).hasClass('active');
    TaskSubmit(category, weight, ieri);
};

TaskSubmit 函数：

function TaskSubmit (taskidsubmitted, weight, ieri) {
$.ajax({
    url: 'submit_task.php?taskid=' + taskidsubmitted + '&weight=' + weight + '&ieri=' + ieri,
    success: function (response) {
        if (response !== "fail") {
            document.getElementById('score-label').innerHTML = response;
        } else {
            document.location = "index.php";
        }
    }
});

}

问题在于这一行：

var ieri = $(checkbox).hasClass('active');

仅更改第一次按下按钮的时间。所有其他时间都保持第一个状态（真或假）。

Answer 1

我相信你应该使用.prop()。

function sendTask(category, weight, checkbox){
    var ieri = ($(checkbox).prop('checked') != undefined);
    TaskSubmit(category, weight, ieri);
};

如果未选中复选框，浏览器应该删除此属性。如果不是这种情况，请使用console.log() 了解它在做什么。

---

在您的 html 中，您将 yesterdaySomeCategory 传递给函数，而不是 "yesterdaySomeCategory"。我不确定 jQuery 对此做了什么，但选择元素的正常方式是通过 $("#yesterdaySomeCategory")。尝试将其更改为

<button class='btn btn-".$buttoncolor."' id='btn-spec-small' type='button' onClick='sendTask(".$category['id'].", &#39;1&#39;, \"#yesterday".$category['id']."\")'>0-15min</button>