时间戳

首页 > 解决方案 > 为什么选中的复选框为空？

javascript - 为什么选中的复选框为空？

问题描述

下面是一个非常简单的javascript函数。当我单击该按钮时，它应该向我显示选中复选框的值，但它没有在控制台中打印出错误，说 checkValue 为空？

我尝试遍历复选框并获得选中的复选框，但我得到了同样的错误。我真的很感激一些帮助！

<body>
<p id='txt'>here: </p>
<button id="btn" type="button" onclick="ok" >Click </button>

<input type="checkbox" class="ckb" value="1">one
<input type="checkbox" class="ckb" value="2">two 
<input type="checkbox" class="ckb" value="3">three
<script>
var checkedValue = document.querySelectorAll('.ckb').checked;

document.getElementById('btn').addEventListener('click', function(){
document.getElementById('txt').innerText = checkedValue.value ;
});
</script>
</body>

循环检查复选框

 var checkedValue; 
 var inputElements = document.querySelectorAll('.ckb');
 for(var i=0; i < inputElements.length; i++){
    if(inputElements[i].checked===true){
         checkedValue = inputElements[i];
         break;
    }
}

标签： javascripthtmlcheckbox

解决方案

通过一些小的调整，这应该是您正在寻找的。


<body>
    <p id='txt'>here: </p>
    <button id="btn" type="button">Click </button>
    
    <input type="checkbox" class="ckb" value="1">one
    <input type="checkbox" class="ckb" value="2">two 
    <input type="checkbox" class="ckb" value="3">three
    <script>

    document.getElementById('btn').addEventListener('click', function()
    {
        var chkbxElements = document.getElementsByClassName("ckb");

        for (element of chkbxElements)
        { 
           if (element.checked)
           {
                document.getElementById('txt').innerText = `here: ${element.value}`;
           }
        } 

    });

    </script>
</body>

推荐阅读