Question

我怀疑选择并验证checkbox div中的id="div1" 已检查 div，而id = "box"又添加checkbox div1 {}为div1，结果为复选框 - ＆gt; div.id = div1 - ＆gt; divbox.id = box

我有这个基本功能来创建div box并插入css并将function createCheckBox() { //count var count = 0; //create div1 var div1 = document.createElement('div'); div1.id = "div1"; div1.style.fontSize = "20px"; //div box var divbox = document.createElement('div'); divbox.id = "box"; //checkbox var checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.name = "checkBox" + (count++); checkbox.id = checkbox.name; var label = document.createElement('label') label.htmlFor = "id"; label.appendChild(document.createTextNode("checkBox" + (count++))); var br = document.createElement('br'); div1.appendChild(checkbox); div1.appendChild(label); div1.appendChild(br); divbox.appendChild(div1); document.body.appendChild(divbox); }添加到checked这是正常的，我不会放function removeCheckBox 1}}代码，因为不需要

function removeCheckBox() {
  //box
  var divbox = document.getElementById("box");
  //inside divbox select element with id = div1
  var div1 = divbox.getElementById("div1");

  for (var i = 0; div1.childNodes.length; i++) {
    if (div1.childNodes[i].checked) {
      alert("CheckBox is checked");
      //remove from div1
      div1.removeChild(div1.childNodes[i]);
    } else {
      alert("CheckBox is not checked");
    }
  }
}

我怀疑是选中复选框，如果是{{1}}则返回并在此{{1}}我想得到复选框的值以这种方式 divbox.id = box - ＆gt; div.id = div1 - ＆gt; checkbox.checked ，它不起作用

{{1}}

任何建议？

Answer 1

根据所有这些评论，有解决方案（代码注释中的描述）：

＆＃13;

function removeCheckBox() {
  var box=document.getElementById('box');
  //get all checked checkboxes inside box div
  var chk=box.querySelectorAll('[type="checkbox"]:checked');
  for(var i=0;i<chk.length;i++) {
   box.removeChild(chk[i].parentNode); //remove complete div, who is parent of checked checkbox
  }
}


function createCheckBox() {
  //count
  var count = 0;

  var div = document.createElement('div');
  div.id = "div1";
  div.style.fontSize = "20px";

  //div box 
  var box = document.getElementById('box');

  //checkbox
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = "checkBox" + (count++).toString();
  checkbox.id = checkbox.name;
  
  var label = document.createElement('label')
  label.htmlFor = "id";
  label.appendChild(document.createTextNode("checkBox" + (count++)));
  var br = document.createElement('br');

  div.appendChild(checkbox);
  div.appendChild(label);
  div.appendChild(br);

  box.appendChild(div);
}

＆＃13;

<input type="button" value="create" onclick="createCheckBox();" />
<input type="button" value="remove" onclick="removeCheckBox();" />
<br>
<div id="box">

</div>

＆＃13;

Answer 2

您在代码中遇到很多问题。你的功能应该是这样的：

function selectCheckBox() {
    //box
    var box = document.getElementById("box");
    //div1
    var div1 = document.getElementById("div1"); //should be document not box

    for (var i = 0; i < div1.childNodes.length; i++) {//should be condition i < div1.childNodes.length, also not spelling of length
        if (div1.childNodes[i].type == 'checkbox') { //make sure it is a checkbox first
            if (div1.childNodes[i].checked) {
                alert("CheckBox is checked");
            } else {
                alert("CheckBox is not checked");
            }
        }
    }
}

获取复选框的值以从DOM中删除div

2 个答案: