javascript - 更新: Applying AJAX'd JSON data to existing checkboxes and checking/unchecking (jQuery)

Question

这个问题已经被清理过，不再像以前那么罗嗦了。希望对您有所帮助。

网络堆栈:ColdFusion 12+/Lucee 5.x
数据库:mySQL/Maria
Handlebars 也在这里发挥作用，尽管我认为与这个问题没有任何相关性。

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

当选中第一部分中的某些复选框并选择单选按钮时，将对数据库进行 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 个物理属性复选框(头发颜色、眼睛颜色、体型等)。然后第二部分是完成的教育(你希望你的理想伴侣有多聪明)。作为开发人员，我假设如果用户从第 1 部分中选择 1 和 4 的复选框，然后在第 2 部分中选择 Radio 22(智能)的单选选项，那么他们可能会选择复选框 101、105 和 106 (坚定、机智、健谈)所以为了方便起见，我想为他们勾选这些选项。如果用户将第 2 部分中的选择从 radio 22(智能)更改为 radio 24(图表外智能)，则第 3 部分中选中的项目将更改为与预定映射匹配。

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

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

Answer 1

这里没什么特别的，只是获取返回的数据并将其应用到现有数据并检查它。简单易行。

注意:这不是我的实现中的逐字记录，也不值得复制和粘贴；然而，它足以回答我的问题，足以满足政府工作的需要。

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