编写JS代码选中子元素值为'100'的li元素的技术需求

假设你的HTML中有多个类似这样的捐赠选项：

<li class="donation-amount suggested-donation-amount">
  <label for="recurring-form-5ae58b3275dc3-field-100">
    <input id="recurring-form-5ae58b3275dc3-field-100" type="radio" name="donation_amount" data-recurring="true" data-value="100" value="100">
    <span class="amount">$100.00 <span class="recurring-details"> / month</span></span>
    <span class="description"></span>
  </label>
</li>
<!-- 其他捐赠选项的li元素 -->

要把值为100的选项设置为选中状态，你可以用以下几种JavaScript方案：

方案1：通过data-value属性定位单选框 #

这个方法利用元素的自定义属性精准匹配，适合需要区分特殊标识的场景：

// 找到目标单选框
const targetDonationRadio = document.querySelector('input[name="donation_amount"][data-value="100"]');

// 先确认元素存在再设置，避免控制台报错
if (targetDonationRadio) {
  targetDonationRadio.checked = true;
}

方案2：通过value属性定位单选框 #

因为你的单选框value值同样是100，也可以直接用这个原生属性来选择：

const targetDonationRadio = document.querySelector('input[name="donation_amount"][value="100"]');

if (targetDonationRadio) {
  targetDonationRadio.checked = true;
}

关键提醒：确保DOM加载完成后执行代码 #

如果你的JS代码放在页面头部，很可能出现DOM还没渲染完成就执行代码、找不到目标元素的情况。这时候可以把代码包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  const targetDonationRadio = document.querySelector('input[name="donation_amount"][data-value="100"]');
  if (targetDonationRadio) {
    targetDonationRadio.checked = true;
  }
});

这样设置后，对应的单选框会被选中，页面上的选中样式（比如高亮、勾选标识）也会自动生效——因为这类捐赠组件通常会用CSS的:checked伪类关联父元素的样式变化。

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