Javascript jQuery：如何打印单选按钮的文本标签？

如果代码是

<form>
  <input type="radio" name="font"> Arial</input><br>
  <input type="radio" name="font"> Times New Roman</input><br>
  <input type="radio" name="font"> Monaco</input><br>
</form>

<script>

  $('form input').each(function(i, e) {
      alert($(this).text())
  })

</script>

Arial

新罗马时代

摩纳哥

$（'forminput'）。每个（函数（即，e）{
警报（$（this）.text（））
})

它显示3个空字符串。它如何显示3种字体的名称

---

请在以下位置尝试：

您不能在

标记中包含文本-这是无效的HTML，即使浏览器将尝试呈现它，如果您希望，您应该使用如下包装器（使文本保持可点击）：

<form>
  <label><input type="radio" name="font" value="Arial"> Arial</label><br>
  <label><input type="radio" name="font" value="Times New Roman"> Times New Roman</label><br>
  <label><input type="radio" name="font" value="Monaco"> Monaco</label><br>
</form>

---

。出于回发原因，您可能还需要在输入上输入一个

值

，因此会发送一个

字体

的值。

您不能在

标记中包含文本-即使浏览器将尝试呈现它，它也是无效的HTML，如果您需要，您应该使用这样的包装器（使文本保持可点击）：

<form>
  <label><input type="radio" name="font" value="Arial"> Arial</label><br>
  <label><input type="radio" name="font" value="Times New Roman"> Times New Roman</label><br>
  <label><input type="radio" name="font" value="Monaco"> Monaco</label><br>
</form>

---

。出于回发原因，您可能还希望在输入上有一个

值，因此会发送
font
的值。
HTML标记不正确。每个选项都需要一个值：

<form>
  <input type="radio" name="font" value="Arial"> Arial <br>
  <input type="radio" name="font" value="Times New Roman"> Times New Roman<br>
  <input type="radio" name="font" value="Monaco"> Monaco<br>
</form>

HTML标记不正确。每个选项都需要一个值：

<form>
  <input type="radio" name="font" value="Arial"> Arial <br>
  <input type="radio" name="font" value="Times New Roman"> Times New Roman<br>
  <input type="radio" name="font" value="Monaco"> Monaco<br>
</form>

您应该使用
元素，并在其
for
属性中指定输入元素的
id
，这样当您单击文本时，它将为您检查无线电输入。正如Nick Craver提到的，在输入元素中不能有文本节点

您可以使用
nextSibling
获取元素后面的文本节点，然后访问其文本的nodeValue属性：

$('form input').each(function(i, e) {
    alert(this.nextSibling.nodeValue);
});

这也应该比用jQuery包装
This
的解决方案更有效。您还可以使用
this.value
获取值，而无需包装和调用
.val（）

更新的fiddle at.
您应该使用
元素，并在其
for
属性中指定输入元素的
id
，这样当您单击文本时，它将为您检查无线电输入。正如Nick Craver提到的，在输入元素中不能有文本节点

您可以使用
nextSibling
获取元素后面的文本节点，然后访问其文本的nodeValue属性：

$('form input').each(function(i, e) {
    alert(this.nextSibling.nodeValue);
});

这也应该比用jQuery包装
This
的解决方案更有效。您还可以使用
this.value
获取值，而无需包装和调用
.val（）

更新的fiddle at.
输入永远没有结束标记，这意味着要正确，您必须具备以下条件：

<form>
  <input type="radio" name="font" /> Arial<br />
  <input type="radio" name="font" /> Times New Roman<br />
  <input type="radio" name="font" /> Monaco<br />
</form>

输入永远没有结束标记，这意味着要正确，您必须具备以下条件：

<form>
  <input type="radio" name="font" /> Arial<br />
  <input type="radio" name="font" /> Times New Roman<br />
  <input type="radio" name="font" /> Monaco<br />
</form>

输入元素没有结束标记。在单选按钮和文本周围使用标签，然后可以按原样单击文本：

<form>
  <label><input type="radio" name="font"/><span>Arial</span></label><br>
  <label><input type="radio" name="font"/><span>Times New Roman</span></label><br>
  <label><input type="radio" name="font"/><span>Monaco</span></label><br>
</form>

输入元素没有结束标记。在单选按钮和文本周围使用标签，然后可以按原样单击文本：

<form>
  <label><input type="radio" name="font"/><span>Arial</span></label><br>
  <label><input type="radio" name="font"/><span>Times New Roman</span></label><br>
  <label><input type="radio" name="font"/><span>Monaco</span></label><br>
</form>

这里不需要ID，一个
用于它所包装的元素，你可以在我的回答中的演示中看到它在工作。你是对的，你不必这样做，但这样看起来更干净，我认为。对每个人来说都是自己的。这里不需要ID，一个
用于它所包装的元素，在我的回答中，你可以在演示中看到它的工作原理。你是对的，你不必这样做，但我觉得这样看起来更干净。但每个人都有自己的想法。请注意，IE 7和更低版本都有带有隐式标签的bug-。我不希望在
value
属性中重复字体名称。。。但是如果我希望标签上写着“默认字体”，而值应该是“”，那该怎么办呢。。。也许它可以说，如果定义了属性
值
，那么就使用它，否则就使用
$（this.parent（）.text（）
@動靜能量 - 您可以执行
警报（$（this.val（）|$（this.parent（）.text（））
以实现此效果：）请注意，IE 7和更低版本存在带有隐式标签的错误-。我不希望在
值
属性中重复字体名称。。。但是如果我希望标签上写着“默认字体”，而值应该是“”，那该怎么办呢。。。也许它可以说，如果定义了属性
值
，那么就使用它，否则就使用
$（this.parent（）.text（）
@動靜能量 - 您可以执行
alert（$（this.val（）|$（this.parent（）.text（））
以实现以下效果：）很好。如果使用jQuery，是否可以像
nextSibling（）
非jQuery方法那样访问文本节点@動靜能量: 我认为任何jQuery遍历方法都不会返回文本节点（仅返回元素）。我想说的一点是，在使用jQuery时，您不必牺牲性能和效率。与this.value相比，看起来像$（this.val（）的代码完全是浪费时间，因为它涉及到所有不必要的包装、比较和函数调用。nice。如果使用jQuery，是否可以像
nextSibling（）
非jQuery方法那样访问文本节点@動靜能量: 我认为任何jQuery遍历方法都不会返回文本节点（仅返回元素）。我想说的一点是，在使用jQuery时，您不必牺牲性能和效率。与此.value相比，看起来像$（this）.val（）的代码完全是浪费时间，因为其中涉及到所有不必要的包装、比较和函数调用。