复选框的Javascript innerhtml

Posted 2023-05-07

【中文标题】复选框的Javascript innerhtml

【英文标题】：Javascript innerhtml of checkbox

【发布时间】：2012-04-25 22:59:44

【问题描述】：

我有一些 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 时，控制台中有未定义的值。

有什么建议吗？

【问题讨论】：

谢谢你的回答，他们很有帮助。

【参考方案1】：

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

你可能想要这样的东西：

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

那么你可以得到：

checkbox.parentNode.innerHTML;

或

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

【参考方案2】：

输入元素没有innerhtml，因为该元素应该是自闭合的：

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

【参考方案3】：

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

必须有开始标签，不能有结束标签。

来自MDN。

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

【参考方案4】：

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

【参考方案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);