Question

我有一些id ='0'，'1'，'2'，'3'等复选框。所以我需要获取复选框的文本。这是PHP中的复选框代码。

'<input id="'.$i.'"type="checkbox" name="option1" value="a1" onclick="checkYears()">'.$years[$i].'</input>

所以我需要获得$ years [$ i] -value。我正在使用此代码。

while (bool==false)
    {
        if (document.getElementById(i)!=null)
        {
            if (document.getElementById(i).checked)
            {
                years.push(1);
                yearsValue.push(document.getElementById(i).innerHTML);
                document.getElementById(i).innerText="WORKS";
                console.log(yearsValue[i]);
            }
            else
            {
                years.push(0);
                yearsValue.push(document.getElementById(i)).innerHTML);
                console.log(yearsValue[i]);
            }
        }
        else 
        {
            bool=true;
        }
        i++;
    }

0和1都添加正常，但是当我尝试使用innerHTML时，在consle中存在和未定义的值。

有什么建议吗？

Answer 1

InnerHTML获取元素的HTML 内容。即开始标记和结束标记之间的数据。输入是空元素，它们不能有内容（在HTML中（与XHTML相反）它们也不能有结束标记）。您的HTML无效，您应该使用a validator。

你可能想要这样的东西：

<label>
    <input type="checkbox">
    <span>Text label</span>
</label>

然后你可以得到：

checkbox.parentNode.innerHTML;

或

checkbox.parentNode.getElementsByTagName('span')[0].innerHTML

Answer 2

input元素没有innerhtml，因为该元素应该是自动关闭的：

<input type="checkbox" name="checkbox" value="1" />

Answer 3

你不能因为<input>没有关闭标记，所以它没有innerHTML属性：

必须有一个开始标记，且不得有结束标记。

来自MDN。

我建议您使用label和输入的组合。

Answer 4

理想情况下，输入元素不会有任何innerHTML。这意味着你不能在input元素中包含一个封闭的html内容。你可以拥有input元素的值。

Answer 5

如前所述，输入元素是自闭合的，没有innerHTML。如果要捕获复选框元素旁边的纯文本，最好的解决方案是使用“ nextElementSibling”和“ innerText”。

<input type="checkbox" id="checkbox1"> <span>Text to get...</span>
<button onclick="getText()">Get Text</button>

JavaScript：

function getText() {
     console.log(document.getElementById("checkbox1").nextElementSibling.innerText);
}

Javascript innerhtml的复选框

5 个答案: