HTML 复选框的文本答案

【问题标题】：Text of the HTML checkboxHTML 复选框的文本
【发布时间】：2014-01-12 11:11:22
【问题描述】：

HTML

<input type="checkbox" value="One" checked="checked" id="r1" name="g" />

    <label for="r1">
        One
    </label>

    <input type="checkbox" value="Two" id="r2" name="g" />

    <label for="r2">
        Two
    </label>

<input type="button" value="Status" onclick="MyFunction()" />

Javascript

function MyFunction() {
 var chk = document.getElementsByName("g");
   for (var i = 0; i < chk.length; i++) {
      if (chk[i].checked == true) {
         alert("Checkbox at index " + i + " is checked!");
         alert("Text at index " + i + chk[i].nextSibling.innerHTML);
         }
     }
}

在这里，我得到了选中的复选框的索引。如何获取选中的Checkboxes的文本？

演示：http://jsfiddle.net/u95uN/

感谢您的帮助。

【问题讨论】：

标签： javascript html

【解决方案1】：

因为在许多浏览器中，nextSibling 将是一个空文本节点。

使用nextElementSibling 而不是nextSibling

WORKING DEMO

ChildNode.nextElementSibling 只读属性返回紧跟其父元素中指定元素的元素 children 列表，如果指定元素是最后一个元素，则返回 null 列表。

function MyFunction() {
         var chk = document.getElementsByName("g");
         for (var i = 0; i < chk.length; i++) {

             if (chk[i].checked === true) {
                 alert("Checkbox at index " + i + " is checked!");
                 alert("Text at index " + i + chk[i].nextElementSibling.innerHTML);

             }
         }

     }

     MyFunction();

【讨论】：

非常感谢！！顺便说一句，nextElementSibling.innerHTML 和 nextElementSibling.innerText 有什么区别？
@Johnny stackoverflow.com/questions/9727111/… 。让我的回答被接受

【解决方案2】：

由于您使用 jQuery 对此进行了标记，因此我将使用 jQuery 来回答。这是小提琴：http://jsfiddle.net/5xL56/3/

说明：点击按钮：

$("#btn").click

它将遍历每个名为“g”的复选框：

$("input[type=checkbox][name=g]").each

【讨论】：

【解决方案3】：

试试这个，你在加载时写JavaScript，在头部或身体中提到如下：

 function MyFunction() {
     var chk = document.getElementsByName("g");
       for (var i = 0; i < chk.length; i++) {

          if (chk[i].checked === true) {
            alert("Checkbox at index " + i + " is checked!");
           alert("Text at index " + i + chk[i].nextElementSibling.innerText);

             }
         }
    }

Demo

【讨论】：

【解决方案4】：

使用chk[i].value 获取选中复选框的值。

alert("Text at index " + i + chk[i].value);

Demo

【讨论】：

是的，但我想要的是文本，而不是值。
只要值等于文本，此解决方案就可以工作。否则，请使用 Samitha 的解决方案。 :)

【解决方案5】：

请更正这一行！

alert("Text at index " + i + chk[i].nextSibling.nextSibling.innerText);

或者你可以使用；

alert("Text at index " + i + chk[i].nextElementSibling.innerText);

或者你可以使用；（我的方式）

alert("Text at index " + i + chk[i].value);

要查看此选项，您可以在 javascript 中编写代码“console.log(chk[i])”，然后才能看到获取文本的选项。

【讨论】：

【解决方案6】：

试试这个，我认为这会奏效：

$.each($("input[name='g']:checked"),function(i,element){
    var id = $(element).attr("id");
    var text = $("label[for='"+id+"']").text();
    alert(text);
});

【讨论】：

【解决方案7】：

使用nextElementSibling 而不是nextSibling

Fiddle demo

但是nextElementSibling 会搜索下一个 HTML 元素，这里是 <label>，因此它就是您需要的。

【讨论】：