无法读取带有值,innerHTML或已选中的复选框的值

时间:2017-08-04 21:21:54

标签: javascript html checkbox

我正在做一个基本的(因为我不熟练,只是喜欢玩小东西来学习)数据库项目,通过选中复选框来设置。但是,当试图检查一个框并读取它是否被选中时,它总是显示为“null”。我尝试过 .value .innerHTML .checked 。什么都没有让我在那里。我想要做的就是用getElementById获取输入(即检查或未检查)并将其存储在var中,然后在比较时如果布尔值为真则为och false以相应地设置数据库中的值。 / p>

function createSheet() {
var _container = document.getElementById("container");
for (var i = 0; i < 4; i++) {
    p = document.createElement("p");
    spanBird = document.createElement("span");
    checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "myCheck" + i;
    checkbox.value = 0;
    checkbox.checked = birds.birdList[i].seen;
    spanBird.innerHTML = birds.birdList[i].name;
    p.appendChild(spanBird);
    p.appendChild(checkbox);
    container.appendChild(p);
    console.log(document.getElementById("myCheck" + i));
    document.getElementById("myCheck" + i).addEventListener("click", readBox);
    }
}

function readBox(){
getId();
theId = theId.substring(7);
console.log("idString: " + idString);
var valueOfId = document.getElementById("idString").checked;
}

错误消息:无法读取null的“已检查”属性。

编辑:谢谢你的回答!我没有显示这些行,因为我认为它们不重要,但我错了,所以他们在这里:

<section id="container">

    </section>

并且HTML上写着:

-c

/ EDIT

有什么建议吗?

3 个答案:

答案 0 :(得分:3)

夫妻俩:

  • 您不需要document.getElementById,因为您已经checkbox
  • 如其他人所述,要使用document.getElementById,您需要将id设置为复选框Element。而且您还需要将元素添加到文档中。

checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "idString"

console.log(checkbox.checked)

document.body.appendChild(checkbox)

console.log(document.getElementById("idString").checked)

答案 1 :(得分:1)

实际上,并不是检查的属性为null,您的父对象为空。

我的意思是,这部分:

document.getElementById("idString")

返回null,因此无法访问checked属性。

您需要先使用此

设置元素的ID
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.setAttribute("id", "idString");
document.body.appendChild(checkbox)
var valueOfId = document.getElementById("idString").checked;

然后你应该能够访问值

答案 2 :(得分:1)

为了工作,你首先需要为你的元素创建属性。

如果不是实例化,你就不能通过id调用。试试吧。

HTML

<div id="content"></div>    

<强> JAVASCRIPT

  checkbox = document.createElement("input");
  checkbox.setAttribute("id", "idString");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("value", "0");

   var element = document.getElementById("content");
   element.appendChild(checkbox);
   var valueOfId = document.getElementById("idString").value;
   console.log(valueOfId);