我正在使用Document.QuerySelectorAll('input[type=checkbox]:checked')从动态创建的复选框中获取选中值

Question

我正在动态创建复选框....我希望复选框中的复选值应该存储在一个数组中...我面临着以下几个问题...

>

var CheckedValue=Document.QuerySelectorAll('input[type=checkbox]:checked')；如果我警告它给出的checkedvalue值未定义

如果我有console.log，则最后一个变量console.log（数组）；如果选中该值，它会在console.log中给出[“on”]。

我没有得到实际值。下面给出了我的代码。我不知道我做错了什么。谁能请你帮帮我。提前致谢

<input type="Submit" Value="add" onclick="searchinput()">
--------------
function searchinput()
{
var li=document.createElement("li");
//creating checkbox
var label=document.createElement('label');
label.className="lab_style";
li.appendChild(label);
    var check=document.createElement('input');
    check.type="checkbox";
    check.name="check_bo";  
    li.appendChild(check);
    check.addEventListener('click', function() {

 var array=[];
  var checkedvalue=document.querySelectorAll('input[type=checkbox]:checked');
    alert(checkedvalue.value);
    for (var i = 0; i < checkedvalue.length; i++) {
    array.push(checkedvalue[i].value);
    console.log(array);
    }
    
}, false);
}

Answer 1

如果您有一个包含一组复选框的表单，并且一旦提交表单，您希望将所有被选中的复选框的值存储在数组中，那么您可以这样做。

null

const checkboxes = document.querySelectorAll("input");
const form = document.querySelector("form");
const arr = [];

form.addEventListener("submit", (e) => {
  e.preventDefault()
  checkboxes.forEach(chbox => {
    if (chbox.checked) {
      arr.push(chbox.value)
    }
  })
  console.log(arr)
})

html lang-html prettyprint-override"><form>
  <label>Apple:
  <input type="checkbox" value="apple" name="test"></label>
  <label>Mango:
  <input type="checkbox" value="mango" name="test"></label>
  <label>Banana:
  <input type="checkbox" value="banana" name="test"></label>
  <label>Grape:
  <input type="checkbox" value="grape" name="test"></label>
  <button type="submit">Submit</button>
</form>

Answer 2

你面临的一个问题是

  document.querySelectorAll('input[type=checkbox]:checked');

返回节点列表并且值不是节点列表对象的属性。这就是您在警报中看到“未定义”的原因。尽可能少地更改代码,我认为这应该是可行的：

function searchinput()
{
    var li=document.createElement("li");
    //creating checkbox
    var label=document.createElement('label');
    label.className="lab_style";
    li.appendChild(label);
    var check=document.createElement('input');
    check.type="checkbox";
    check.name="check_bo";  
    li.appendChild(check);
    check.addEventListener('click', function() {

        var array=[];
        var checkedvalue = document.querySelectorAll('input[type=checkbox]:checked');
        for (var i = 0; i < checkedvalue.length; i++) {
            if(checkedvalue[i].checked) {
                array.push(checkedvalue[i].value);
            }
        }
    
    }, false);
}