如何在類型複選框

Question

的HTML輸入標記得到相關的文本我有一個像下面

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

我的元素如何獲得輸出爲「印度」？ 下面只返回工業

document.getElementById("Countries").value; 

Answer 1

這是不可能的，因爲你的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 2

我不認爲你可以，因爲這是不合法的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> 

Answer 3

有一種方法可以在您不關心語義正確性時獲取值。

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

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

出於完整性：

如Form W3

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

或

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

提到您shoult做一個輸入型這樣的0

或

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

在THIS POST 也提到了，然後用JavaScript來獲取coresponding label值。