其他事件后复选框不会在页面上保持加载答案

【问题标题】：Check boxes will not stay loaded on page after other events其他事件后复选框不会在页面上保持加载
【发布时间】：2015-05-12 19:57:25
【问题描述】：

目标：我有一个复选框列表，这些复选框通过 JSON 和 javascript 加载到 HTML DOM 上。复选框按钮将正常加载到页面上，但如果我使用我的其他功能uncheckAllCities()，所有按钮都会从显示屏上消失，而不是取消选中它们。我不确定为什么。其他一些操作也会发生这种情况，例如当我要求它进行计算时，检查按钮会丢失。也许这与我如何从 JSON 中添加复选框有关。任何想法为什么按钮从视图中消失？以下函数生成复选框...

function buildCheckBoxes() {
    JSONCities = [ //Build checkbox controls to choose which cities get APIs      
        {
            "CityName": "Bellaire",
            "LatLong": "47.1200,-88.4600",
            "index": "a",
            "checked": "checked"
        }, ...(more JSON code)...
    },
];
//Form a list of checkboxes from JSON
for (j = 0; j < JSONCities.length; j++) //Need to learn if value may be set in checkbox to return, not just true and false checked
{
    loadChk = '<input class="checkboxes_class" type="checkbox" name="checkbox-v-2' + JSONCities[j].index + '" value="' + JSONCities[j].LatLong + '" id="checkbox-v-2' + JSONCities[j].index + '"' + JSONCities[j].checked + '>' + " " + '<label for="checkbox-v-2' + JSONCities[j].index + '">' + JSONCities[j].CityName + '</label>';
    locCheckBtn += loadChk;
}
$('#loc1').html(locCheckBtn); // update HTML DOM    
}


$(document).ready(function() {
    //prepare checkbox buttons on page load.
    buildCheckBoxes();
});

function uncheckAllCities() { //stackoverflow.com/questions/14110169/check-uncheck-the-array-of-checkboxes
    document.getElementsByClassName("checkboxes_class").checked = false;
}

【问题讨论】：

您能否创建一个简短的jsfiddle（或在其他地方上传一个现场演示）来展示这种行为？这段代码似乎没有什么明显的问题，但也许我们可以在现场演示中看到一些奇怪的地方。
当然需要一分钟。您如何在 jsfiddle 上与公众分享它？我以前试过，但没有用，但我会再试一次。可能有一些错误。因为它每会话运行一次。
别担心！它对我来说并没有完全发挥作用，但我设法玩了一下。我无法触发该错误，但我确实在您的uncheckAllCities 函数中发现了一个错误，该错误可能导致/帮助了该错误：document.getElementsByClassName 返回一个元素数组，而不是单人。因此，与其将checked = false 添加到结果中，不如遍历数组并将checked = false 设置为数组中的每个项目。
如果您将它放入浏览器或某些编辑器程序中，这应该可以工作。出于某种原因，jsfiddle 没有加载按钮，但它是我自己使用的确切代码，并且可以正常工作。 jsfiddle.net/safron6/apm1L6gr
这也行不通，因为您仍在将checked 分配给document.getElementsByClassName 的结果。但是，我完全错过了您正在使用 jQuery，因此您可以让自己变得更简单：$(".checboxes_class").prop("checked", false) 就是您所需要的。它的工作原理是这样的：$(".checkboxes_class") 选择带有checkboxes_class 的所有元素，但将它们“包装”在一个 jQuery 对象中。该包装对象允许您使用 .prop("checked", false) 同时为所有元素设置选中的属性。

标签： javascript jquery html json dom

【解决方案1】：

玩弄你的代码我发现了两个问题：

我已经在评论中提到了这一点：getElementsByClassName 返回一个集合，而不是一个元素，因此您应该循环它并将checked = false 设置为每个单独的元素。
默认情况下，所有 html 按钮都是提交按钮。因此，只要您单击任何按钮，就会提交表单，从而刷新页面。如果您将type="button" 属性添加到每个按钮，则单击它们时将不会提交表单（例如<button type="button">click here!</button>）。（小旁注：我不确定为什么在提交表单后复选框不加载，但将type 设置为button 至少应该可以解决您的问题，所以我没有进一步调查）

【讨论】：

但是这些会是复选按钮吗？我怎么知道它是否被选中？类型使这些复选框正确吗？
看来我已成功将值设置为 false。为了使用按钮，我必须设置一个背景表来存储选定的值，但这对用户来说可能并不明显，除非我使用 CSS 修改按钮以显示它已设置。
这是答案，但未解决复选框取消选择城市功能错误。