js 获取单选按钮的文本

在JavaScript中获取单选按钮（radio button）的文本内容，通常需要通过遍历相关的DOM元素来实现。以下是一个基础的示例，展示了如何获取选中的单选按钮旁边的文本内容：

HTML结构

<div>
  <label><input type="radio" name="gender" value="male">男</label>
  <label><input type="radio" name="gender" value="female">女</label>
</div>
<button onclick="getSelectedRadioText()">获取选中项文本</button>

JavaScript代码

function getSelectedRadioText() {
  // 获取所有名为gender的单选按钮
  var radios = document.getElementsByName('gender');
  var selectedText = null;

  // 遍历单选按钮
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      // 如果单选按钮被选中，获取其相邻的文本内容
      selectedText = radios[i].nextSibling.nodeValue.trim();
      break;
    }
  }

  // 输出选中的文本内容
  console.log(selectedText);
}

解释

1. HTML部分：创建了两个单选按钮，并为每个按钮设置了name属性以便它们属于同一组。每个单选按钮都包裹在<label>标签中，这样可以直接点击文本来选择对应的单选按钮。
2. JavaScript部分：
   • getSelectedRadioText函数首先通过getElementsByName获取所有名为gender的单选按钮。
   • 然后遍历这些单选按钮，检查哪个按钮被选中（checked属性为true）。
   • 一旦找到选中的按钮，就使用nextSibling属性获取紧跟在单选按钮后面的文本节点，并使用nodeValue获取其文本内容。trim()方法用于去除可能存在的空白字符。
   • 最后，将选中的文本内容输出到控制台。

注意事项

• 这种方法假设文本内容紧跟在单选按钮后面，并且是通过<label>标签包裹的。如果页面结构不同，可能需要调整获取文本内容的方式。
• 在某些情况下，nextSibling可能不是文本节点，而是其他类型的节点（如空格或换行符）。这时，可能需要进一步检查节点类型或使用其他方法来确保正确获取文本内容。

这种方法简单直接，适用于大多数基本的HTML结构和需求。如果页面结构复杂或有特殊要求，可能需要采用更复杂的DOM操作技巧。