Question

目标：我有一个通过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;
}

Answer 1

使用你的代码我发现了两个问题：

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

在其他事件发生后，复选框不会保持在页面上

1 个答案: