更新：将 AJAX 的 JSON 数据应用于现有复选框和 checking/unchecking (jQuery)

Question

这个问题已经清理干净，不再像以前那么罗嗦了。希望对你有帮助。

网络堆栈：ColdFusion 12+/Lucee 5.x
数据库：mySQL/Maria
车把也在这里发挥作用，但我认为与这个问题没有任何关系。

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

当第一部分中的某些复选框被选中并且单选按钮被 select 编辑时，将对数据库进行 ajax 调用以检索对应的复选框的 "active" 值到第三部分的复选框。第三部分中的整个复选框列表应始终可见，因为用户可以根据需要添加其他 selections/deselections。

希望这个例子能有所帮助：

第一节

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

第二部分

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

因此，根据上面 selected 的选项，将向用户显示以下内容，但用户仍可以根据需要进行更改。
第三节

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

我还没有代码可以分享，因为我刚刚开始这个应用程序领域，但如果有人愿意与我一起工作，我可以 post 代码（and/or gist) 随着我的进行。我怀疑这个 SO 问题需要一些时间才能将答案标记为正确，所以只知道继续前进。我认为这将是一个有趣的练习，我期待反馈。

=============给场景一些背景=============
假设这是 am "ideal mate personality profile"（不是，但让我们假装在这里）。使用上面提供的示例布局，第 1 部分有 4 个物理属性复选框（头发颜色、眼睛颜色、身材等）。然后第 2 部分是完成的教育（你希望你的理想伴侣有多聪明）。作为开发人员，我假设如果用户 select 在第 1 节中选择了 1 和 4 的复选框，然后在第 2 节中选择了无线电 22（智能）的无线电选项，那么他们可能 select 复选框 101、105 和 106（坚定、机智和健谈）所以为了方便起见，我想为他们勾选这些选项。如果用户将第 2 部分中的 selection 从 Radio 22（智能）更改为 Radio 24（图表外智能），则第 3 部分中选中的项目将更改以匹配预定映射。

数据库有两个 table 数据 - 源数据显示 checkboxes/radio 选项的选项，然后第二个 table 显示映射（见下图).

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

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

更新：将 AJAX 的 JSON 数据应用于现有复选框和 checking/unchecking (jQuery)

UPDATED: Applying AJAX'd JSON data to existing checkboxes and checking/unchecking (jQuery)

javascript

coldfusion

jquery