复选框值根据用户输入的数据反转，JavaScript 需要知道何时被选中

Question

晚上好，

我有一个场景，用户选中一个框以通过 SparkJava/Java 在 MySQL 数据库中输入一行数据（或更新一行数据） .除了一个小问题外，一切都按预期工作。

如果一个值已经存在于数据库中，复选框将与它应该的相反。因此，例如...用户第一次单击该复选框时，它会将其添加到数据库中。但是，如果您刷新页面，它将尝试再次添加而不是删除它。

我几乎可以肯定问题出在以下行：

var newValue = $(this).is(':checked') ? "add" : "remove";

但我不确定如何让 Java脚本知道该值是否已经被检查过。请注意，我已经在 HTML 中通过 Velocity 使用条件语句进行此检查（此功能按预期工作）。

#if ($amiibo.Collected == "Y")
<div class="star has-text-warning" id="star$amiibo.AmiiboID">
#else
<div class="star" id="star$amiibo.AmiiboID">
#end

下面是我的 Java 脚本的完整片段：

$(document).ready(function(){
    $( ".mine" ).change(function() {

     var newValue = $(this).is(':checked') ? "add" : "remove";

        var amiibo = $(this).attr('id');
        var activeAmiiboID = amiibo.split('#')[1];
        var activeAmiiboName = amiibo.split('#')[2];
        $("#star"+activeAmiiboID).toggleClass("has-text-warning");
        console.log( "Handler for .change() called with value: " + newValue );
        console.log("activeAmiiboID is: "+ activeAmiiboID);
        console.log("Sending request to backend");
        if (newValue == 'add') {
            VanillaToasts.create({
                title: 'Added to Favorites',
                text: activeAmiiboName + ' has been added to your Collection.',
                timeout: 4000,
                type: 'success',
            });
        }
        else if (newValue == 'remove') {
            VanillaToasts.create({
                title: 'Removed from Favorites',
                text: activeAmiiboName + ' has been removed from your Collection.',
                timeout: 4000,
                type: 'error',
            });
        }
        $.ajax({
            url: '/collection',
            type: 'post',
            data: {
                mine: newValue + "Amiibo",
                amiiboID: activeAmiiboID
            },
            success: function () {
                console.log("Request completed successfully");
            }
        });
    });

如有任何帮助，我们将不胜感激。有没有...

A) 一种让 javascript 知道这个值的方法是根据我在 velocity 或 B) 让Java脚本知道这个值被选中的另一种合理方法

谢谢！特拉维斯 W.

Answer 1

我想我明白了。我是运行一个新变量 addRemove 通过 if 语句，然后让 JS 决定添加或删除。仍然对其他想法持开放态度！始终开放学习。以下是我测试过并且有效的解决方案：

$(document).ready(function(){
    $( ".mine" ).change(function() {

        var amiibo = $(this).attr('id');
        var activeAmiiboID = amiibo.split('#')[1];
        var activeAmiiboName = amiibo.split('#')[2]
        var addRemove = document.getElementById("mine#"+activeAmiiboID+"#"+activeAmiiboName).value;

        if (addRemove == 'Y') {
            console.log("If: Value was "+ addRemove);
            var newValue = $(this).is(':checked') ? "remove" : "add";

        } else {
            console.log("Else: Value was "+ addRemove);
            var newValue = $(this).is(':checked') ? "add" : "remove";
        }

        $("#star"+activeAmiiboID).toggleClass("has-text-warning");
        console.log( "Handler for .change() called with value: " + newValue );
        console.log("activeAmiiboID is: "+ activeAmiiboID);
        console.log("Sending request to backend");
        if (newValue == 'add') {
            VanillaToasts.create({
                title: 'Added to Favorites',
                text: activeAmiiboName + ' has been added to your Collection.',
                timeout: 4000,
                type: 'success',
            });
        }
        else if (newValue == 'remove') {
            VanillaToasts.create({
                title: 'Removed from Favorites',
                text: activeAmiiboName + ' has been removed from your Collection.',
                timeout: 4000,
                type: 'error',
            });
        }
        $.ajax({
            url: '/collection',
            type: 'post',
            data: {
                mine: newValue + "Amiibo",
                amiiboID: activeAmiiboID
            },
            success: function () {
                console.log("Request completed successfully");
            }
        });
    });

复选框值根据用户输入的数据反转，JavaScript 需要知道何时被选中

Checkbox Value is reversed based on data that user enters, JavaScript needs to know when it is checked

html

javascript

jquery

velocity