如何在复选框类型的html输入标记中获取文本

Question

我的元素如下

<input type="checkbox" id="Countries" value="Ind">India</input>

如何将输出作为“印度”？ 以下仅返回Ind

document.getElementById("Countries").value;

Answer 1

当您不关心语义正确性时，有一种方法可以获得价值。

＆＃13;

＆＃13;

alert(document.getElementById('Countries').nextSibling.nodeValue);

＆＃13;

<input type="checkbox" id="Countries" value="Ind">India</input>

＆＃13;

＆＃13;

＆＃13;

为了完整性：

你应该像Form W3

中提到的那样输入这样的输入类型

<label for="Countrie">India</label>
<input type="checkbox" id="Countrie" />

或

<input type="checkbox" id="Countrie" />
<label for="Countrie">India</label>

或

<label>
   <input type="checkbox" name="Countrie" />
   India
</label>

在THIS POST中也有提及 然后使用javaScript获取相应的label值。

Answer 2

这是不可能的，因为您的html错误。

input是一个自我结束标记，所以它应该是这样的。

<input type="checkbox" id="Countries" value="Ind" />

因此，没有其他值可以使用javascript然后value提取。 或者您应该使用data-attribute和印度作为值。

HTML

<input type="checkbox" data-country="India" id="Countries" value="Ind" />

JS

var checkbox = document.querySelector('#Countries'); // or document.getElementById("Countries");

alert(checkbox.dataset.country);

请参阅此小提琴http://jsfiddle.net/zwx43m59/

Answer 3

我不认为你可以，因为那不是有效的HTML代码。

输入标记为空，表示它只能包含属性。因此，没有</input>可以关闭它。

虽然有很多方法可以在其中存储数据。

从HTML 5开始，有一个数据属性可以放在任何元素上。你可以这样做：

<input type="checkbox" id="Countries" value="Ind" data-something="India" />

// Inside JS
document.querySelector("#Countries").dataset.something

另一种选择是在文本后面包裹p或跨度。

<input type="checkbox" id="Countries" value="Ind" />
<p id="CountriesText">You can get this value easily enough</p>