javascript - 在其他事件发生后，复选框不会在页面上保持加载状态

Question

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

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

Answer 1

研究你的代码我发现了两个问题:

1. 我已经在评论中提到了这一点:getElementsByClassName返回一个集合，而不是一个元素，所以你应该遍历它并设置 checked = false到每个单独的元素。

2. 默认情况下，所有 html 按钮都是提交按钮。因此，只要您单击任何按钮，就会提交表单，从而刷新页面。如果添加 type="button"为每个按钮添加属性，当您单击它们时不会提交表单(例如 <button type="button">click here!</button> )。 (小旁注:我不太确定为什么在提交表单后复选框没有加载，但是将 type 设置为 button 至少应该可以解决您的问题，所以我没有进一步调查)