如何根据关联文本条件（Mr或Mrs）获取对应input标签

方法1：XPath定位（适配性最高，直接匹配文本需求） #

该方法可以直接命中label标签内包含Mr.或Mrs.文本的场景，一步定位到对应的input标签，XPath语句如下：

//label[contains(normalize-space(.), 'Mr.') or contains(normalize-space(.), 'Mrs.')]//input[@type='radio']

语句说明：

• normalize-space(.) 用于清理label内的换行、多余空格等空白字符，避免HTML排版导致的文本匹配失败
• 可根据实际匹配精度调整匹配逻辑：如果需要完全匹配文本，将contains替换为=即可；如果只需要匹配前缀，替换为starts-with
• 仅需匹配Mr对应的input时，删除or及之后的条件即可，同理仅匹配Mrs时仅保留后半段条件

方法2：原生JavaScript实现 #

如果是在浏览器环境用JS获取元素，可使用以下代码：

// 批量获取Mr、Mrs对应的所有input
const genderInputs = Array.from(document.querySelectorAll('label'))
  .filter(label => {
    const labelText = label.textContent.trim()
    return labelText === 'Mr.' || labelText === 'Mrs.'
  })
  .map(label => label.querySelector('input[type="radio"]'))

// 仅获取Mr.对应的单个input
const mrInput = Array.from(document.querySelectorAll('label'))
  .find(label => label.textContent.trim() === 'Mr.')
  ?.querySelector('input[type="radio"]')

方法3：jQuery实现 #

如果项目引入了jQuery，可使用简化写法：

// 匹配Mr、Mrs对应的input
const $genderInputs = $('label').filter(function() {
  return $.trim($(this).text()) === 'Mr.' || $.trim($(this).text()) === 'Mrs.'
}).find('input[type="radio"]')

以上方案均基于你提供的HTML结构编写，如果实际页面的标签层级有变动，可对应调整选择器的匹配深度。

内容的提问来源于stack exchange，提问作者xuxu