自动检查复选框以在 ajax 调用中匹配结果答案

【问题标题】：auto check checkboxes for matching result in ajax call自动检查复选框以在 ajax 调用中匹配结果
【发布时间】：2019-11-14 23:09:46
【问题描述】：

我正在努力做到这一点，以便当我的 ajax 调用与对象/数组一起返回时，我可以将结果与复选框进行匹配，这样如果有匹配项，我会自动选中复选框

这是我的复选框

<input type="checkbox" name='Magazine' data-md-icheck  />
<input type="checkbox" name='Website' data-md-icheck  />
<input type="checkbox" name='Advertisement' data-md-icheck  />

现在我的ajax调用成功了

我回来了：

0: {}
type: "Magazine"
1: {}
type: "Website"

所以在我的 ajax 成功中，我想做的是在该对象中获取任何结果，无论是一个还是全部 3，如果类型与我想选中该框的复选框的“名称”匹配。

这是我成功调用 ajax 的函数。我只是想不出一种方法来循环我得到的返回，以便我可以匹配任何通过的结果

function getDetails(ID) {
    console.log(ID);
    $.ajax({
        url: "/details",
        data: {ID:ID},
        _token: "{{ csrf_token() }}",
        type: "POST",
        success: function (data) {

        },
    });
};

那么在这种情况下，我将如何修改我的 ajax 成功以检查杂志和网站框？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

这是一个纯 JS 和简单的解决方案：-

// Assuming you get the response as an array of objects, which has a key as type
success: function (data) {
    data.forEach(obj => {
        let ele = document.getElementsByName(obj.type)[0];
        if(ele) {
          ele.checked = true;
        }
    });
}

【讨论】：

【解决方案2】：

这就是我要解决的问题：

function getDetails(ID) {
  console.log(ID);
  $.ajax({
    url: "/details",
    data: {ID:ID},
    _token: "{{ csrf_token() }}",
    type: "POST",
    success: function (data) {
      for(var i=0;i<data.length;i++){
        var item = data[i].type;
        var checkbox = $('input[name="'+item+'"]);
        if (checkbox.length){
          checkbox.prop('checked', true);
        }
      } 
    },
  });
};

【讨论】：

谢谢，我这样做了，并使用日志记录来确认项目设置正确，就是这样。它与复选框的名称匹配，但仍未选中。如果这有什么不同的话，这是在 laravel 中
在您的 AJAX 成功函数尝试查找和检查复选框时，可能未呈现复选框（作为 DOM 的一部分），这可以通过确保此 AJAX 函数在 DOM 之后运行来解决准备好了，即将它放入$(window).on('load', function(){ })

【解决方案3】：

假设结果是与你提供的完全一样的纯文本（ES6+）

let a = 'result...'
            ['Magazine', 'Website', 'Advertisement'].filter(item => a.indexOf(item) != -1).forEach(item => {
                let inputs = document.getElementsByName(item)
                if (inputs.length > 0)
                    inputs[0].checked = true
            })

【讨论】：