更新：将AJAX的JSON数据应用于现有复选框并检查/取消选中（jQuery）

Posted 2021-04-24

这个问题已被清理干净，并没有像现在这样冗长。希望能帮助到你。

网络堆栈：ColdFusion 12 + / Lucee 5.x. db：mysql / Maria 车把也在这里发挥，虽然我认为这个问题没有任何意义。

我有一个包含三个部分的表单： 第一部分是一系列复选框 第二部分是一系列单选按钮 第三部分是另一组复选框

当选中第一部分中的某些复选框并选择单选按钮时，将对数据库进行ajax调用，以检索与第三部分中的复选框对应的复选框的“活动”值。第三部分中的整个复选框列表应始终可见，因为用户可以根据需要进行其他选择/取消选择。

希望这个例子有助于：

第一节

CHECKBOX 1 [X]      CHECKBOX 2 [ ]      CHECKBOX 3 [ ]      CHECKBOX 4 [X]  

第二节

RADIO 20 ( )      RADIO 21 ( )      RADIO 22 (*)      RADIO 23 ( )      RADIO 24 ( )  

因此，基于上面选择的选项，将向用户呈现以下内容，但是用户仍然可以根据需要进行更改。 第三节

CHECKBOX 101 [X]      CHECKBOX 102 [ ]      CHECKBOX 103 [ ]      CHECKBOX 104 [ ]      CHECKBOX 105 [x]      CHECKBOX 106 [X]  

我还没有分享代码，因为我刚刚开始使用该应用程序的这个区域，但如果有人愿意和我一起工作，我可以随时发布代码（和/或要点）。我怀疑这个问题需要一些时间才能将答案标记为正确，所以才知道未来。我认为这将是一个有趣的练习，我期待着反馈。

=============为场景提供一些背景============= 让我们说这是“理想的伴侣个性简介”（不是让我们假装在这里）。使用上面提供的示例布局，第1部分有4个物理属性复选框（头发颜色，眼睛颜色，构建等）。然后第2部分是完成的教育（你希望你的理想配偶有多聪明）。作为开发人员，我假设如果用户从第1部分中选择1和4的复选框，然后在第2部分中选择Radio 22（Smart）的无线电选项，那么他们可能会选择Checkboxe 101,105和106 （坚定，机智和会话主义者）所以我想为他们检查这些选项是为了方便。如果用户将第2部分中的选择从无线电22（智能）更改为无线电24（关闭图表智能），则第3部分中已检查的项目将更改为与预定映射匹配。

数据库有两个数据表 - 显示复选框/单选项选项的源数据，然后是显示映射的第二个表（参见下图）。

我的问题基本上是如何将映射值应用于页面上已加载的数据？在伪代码中： - 检索JSON映射数据值 - 遍历DOM元素，将现有项与ajax调用返回的值进行比较 - 如果匹配，请选中此框 - 如果不匹配，请保留该框，以防用户选中该复选框

答案

这里没什么好看的，只需获取返回的数据并将其应用于现有数据并进行检查。十分简单。

注意：这不是我的实现的逐字记录，不是复制和粘贴值得的;但是，它回答了我的问题，足以让政府工作。

var formData = $("#myRighteousForm :not(.exclude)").serialize();
$.ajax({
    method: "POST",
    url: "/?action=card.getData",
    dataType: "JSON",
    data: formData   
}).then(
    function(response) {
        $.each(response.data, function(key, value) {
            $('#id_' + value.thisLabel + ':checkbox').prop('checked', true); 
        });
    }
);