javascript - 通过其父类使用 JavaScript 获取子输入的值

Question

我想使用 Javascript 而不是 Jquery 通过标签类获取输入值。我的 html 代码是:

<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

我试过

document.getElementsByClassName("active").children

和

document.getElementsByClassName("active").value

并检查 console.log 值，但我没有得到任何有用的信息。

提前致谢。

Answer 1

首先，由于您使用 getElementsByClassName 作为初始选择器，您将收到一个元素集合。如果您确定在整个页面中只有一个元素具有该类，您可以使用 [0] 访问它，否则您需要循环该元素。

在代码中:

document.getElementsByClassName("active")[0]

现在您有了标签元素，您可以使用 childNodes 检索所有子节点。要仅根据您当前的 HTML 代码检索 input，您可以使用 querySelector('input')

在代码中

document.getElementsByClassName("active")[0].querySelector('input[name="units[]"]')

如果您在页面的其他任何地方使用 active 类，上述代码可能会导致问题。由于 active 类很常见，您可能希望选择器更加具体。

我的建议是将 button-calculator 类与 active 类一起使用。

所以在代码中:

document.getElementsByClassName("active button-calculator")[0].querySelector('input[name="units[]"]')