javascript - bootstrap 通过js获取输入复选框的值

Question

我有以下来自 bootstrap 的标记(抱歉，我是后端开发人员，没有 JS 经验):

        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="{{i.id}}-choice0">
          <label class="custom-control-label" for="{{i.id}}-choice0">some_answer0</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="{{i.id}}-choice1">
          <label class="custom-control-label" for="{{i.id}}-choice1">some_answer1</label>
        </div>

我想知道如何记录两个 div 元素的用户输入(仅当勾选复选框时)。 Id 就像 JS 中的一个数组，其 input 值与其 id 一起。因此，也许一个列表/元组的 JS 列表(请随意建议合适的数据结构)如下所示:

 some_var=[[id0,some_answer0],[id1,some_answer1]..]

仅使用 JS 可以吗？

更新

所以，在 Aaron'e 回复后，我为我的 JS 准备了这个:

    <script>
    var idVals = [];
    function myNewFunction() {
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].type == "checkbox"){
            idVals.push([inputs[i].id, inputs[i].checked]);
        }
    }

    console.log(idVals)
    }
    </script>

当用户单击下一页时，我将调用该函数:

 <li class="page-item"><a class="page-link" href="?page={{ i }}" onclick="myNewFunction();" >{{i}}</a></li>

Answer 1

这将遍历页面上的每个输入并检查输入是否是复选框。如果是这样，它会将其 id 和 checked 值(true 或 false)的数组添加到 idVals数组。

window.addEventListener("unload", saveAggregateIdValsToLocalStorage);

function getIdValsFromPage(){
    var idVals = [];
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].type == "checkbox"){
            idVals.push([inputs[i].id, inputs[i].checked]);
        }
    }
    return idVals;
}

function getIdValsFromLocalStorage(){
    return JSON.parse(window.localStorage.getItem("idVals")) || [];
}

function getAggregateIdVals(){
    return getIdValsFromLocalStorage().concat(getIdValsFromPage());
}

function saveAggregateIdValsToLocalStorage(){
    var aggregateIdVals = getAggregateIdVals();
    window.localStorage.setItem("idVals", JSON.stringify(aggregateIdVals));
}

getIdValsFromPage 返回当前页面的 idVals。来自之前所有页面的 getIdValsFromLocalStorage。 saveAggregateIdValsToLocalStorage 将两者结合起来并保存到 localStorage，以便您为下一页做好准备。这一行:

window.addEventListener("unload", saveAggregateIdValsToLocalStorage);

在页面更改之前保存所有内容。

因此，您应该准备好跨页面使用一致的数组，如下所示:

console.log(getAggregateIdVals());