Question

这是当前选中的单选按钮的html片段：

<label>
    <input type="radio" name="reason" value="1" data-promo="1">
    "some text here bla bla"
</label>

使用我在here找到的一行JS，我能够获取输入元素而不是文本：

document.querySelector('input[name="reason"]:checked');

返回：

<input type="radio" name="reason" value="1" data-promo="1">

我如何抓住这个元素后面的文字“这里的一些文字bla bla”？

Answer 1

文本节点是复选框的下一个兄弟，所以

＆＃13;

function test() {
  var checkbox = document.querySelector('input[name="reason"]:checked');
  if (checkbox) {
    var text = checkbox.nextSibling.textContent;
    alert(text);
  }
}

＆＃13;

<label>
  <input type="radio" name="reason" value="1" data-promo="1">text 1
</label>
<label>
  <input type="radio" name="reason" value="2" data-promo="2">text 2
</label>
<label>
  <input type="radio" name="reason" value="3" data-promo="3">text 3
</label>
<label>
  <input type="radio" name="reason" value="4" data-promo="4">text 4
</label>
<button onclick="test()">Test</button>

＆＃13;

Answer 2

如果您事先不知道文本的位置，那么最简单的选项是访问父label元素的textContent property：

document.querySelector('input[name="reason"]:checked').parentElement.textContent;

当然，这假设它是label元素中唯一的文本节点。

或者，如果 {/ 1}}元素后文本始终显示为，则您只能访问next sibling的input属性：

textContent

Answer 3

如果你想像你一样使用javascript，那么试试这个 -

alert(document.querySelector('input[name="reason"]:checked').nextSibling.textContent);

你也可以使用jQuery做这样的事情，

$('input[name="reason"]').on("click", function(){
    alert($(this).closest("label").text());
});

Answer 4

我对您的代码做了一些小改动。添加了data-txt并使用了getAttribute

var a = document.querySelector('input[name="reason"]:checked').getAttribute("data-txt");
alert(a);

检查这对您有何用处。

从选中的单选按钮获取文本节点

4 个答案: