通过父类使用 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]其他loop元素来访问它。

在代码中：

document.getElementsByClassName("active")[0]

现在您已经有了 label 元素，您可以使用 检索所有子节点childNodes。要仅input根据当前的 HTML 代码检索，您可以使用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[]"]')