我想在 javascript 中捕获选中复选框的所有标签

Question

有没有办法在 Javascript（不是 JQuery）中捕获选中复选框的所有标签文本。

我的HTML是：

<div class="wpgu-onboarding-answer-container">
   <div class="wpgu-onboarding-answer" data-bc-answer-post="Firstitem">
      <input id="post-3-0" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="670" checked="checked">
      <label for="post-3-0" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">Firstitem</span>
      </label>
   </div>
   <div class="wpgu-onboarding-answer" data-bc-answer-post="SecondItem">
      <input id="post-3-8" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="681">
      <label for="post-3-8" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">SecondItem</span>
      </label>
   </div>
</div>

我想在 Javascript 中捕获选中复选框的标签，以便将其用作 Google Tagmanager 中的 Javascript 变量。

目前我有这段代码（来自 www.simoahava.com）来捕获选中复选框的值。

function () {


    var inputs = document.querySelectorAll('.wpgu-onboarding-answer-containter input'),
        selectedCheckboxes = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
            selectedCheckboxes.push(inputs[i].value);
        }
    }
    return selectedCheckboxes;
}

此脚本为我提供了所有值，但这些是 none-描述性值。但我想要描述性标签。

有没有办法在 class .wpgu-onboarding-answer-title 所有选中复选框的范围内捕获文本？

提前致谢

埃里克

Answer 1

基于 this answer 使用 jQuery，您可以使用属性选择器和要为其获取标签的元素的 ID，例如document.querySelector('label[for=' + button.id + ']')，然后获取其textContent得到实际标签：

document.querySelectorAll('input.wpgu-onboarding-answer-checkbox').forEach(input => {
  console.log(input.id + ' ' +
    document.querySelector('label[for=' + input.id + ']').textContent.trim() + ' ' +
    (input.checked? '' : 'not ') + 'checked'
  )
});

<div class="wpgu-onboarding-answer-container">
   <div class="wpgu-onboarding-answer" data-bc-answer-post="Firstitem">
      <input id="post-3-0" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="670" checked="checked">
      <label for="post-3-0" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">Firstitem</span>
      </label>
   </div>
   <div class="wpgu-onboarding-answer" data-bc-answer-post="SecondItem">
      <input id="post-3-8" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="681">
      <label for="post-3-8" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">SecondItem</span>
      </label>
   </div>
</div>

Answer 2

除了之前的解决方案，想分享一个基于问题中提到的代码的更简单的解决方案。解决方案可以很简单，只需获取带有 class 和 wpgu-onboarding-answer-title 的所有标签，并根据选择的输入元素获取相应的标签索引并使用它。请注意，我添加了一个额外的按钮来方便地测试功能。

function abc() {
        var labels = document.querySelectorAll('.wpgu-onboarding-answer-title');
    var inputs = document.querySelectorAll('.wpgu-onboarding-answer-container input'),
        selectedCheckboxes = [];
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
                selectedCheckboxes.push(labels[i].textContent);
            //selectedCheckboxes.push(inputs[i].value);
        }
    }
    console.log(selectedCheckboxes);
    return selectedCheckboxes;
}

<div class="wpgu-onboarding-answer-container">
   <div class="wpgu-onboarding-answer" data-bc-answer-post="Firstitem">
      <input id="post-3-0" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="670" checked="checked">
      <label for="post-3-0" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">Firstitem</span>
      </label>
   </div>
   <div class="wpgu-onboarding-answer" data-bc-answer-post="SecondItem">
      <input id="post-3-8" class="wpgu-onboarding-answer-checkbox" type="checkbox" name="posts_stijlen[]" value="681">
      <label for="post-3-8" class="wpgu-onboarding-answer-label">
      <span class="wpgu-onboarding-answer-title">SecondItem</span>
      </label>
   </div>
</div>
<button onclick="abc()">
  Fetch All Chkbox Values
</button>

请注意，此解决方案只有在您将 wpgu-onboarding-answer-title class 仅用于此目的而不是之前页面中的其他任何地方时才有效。

Answer 3

这对你有帮助。

var inputs = document.querySelectorAll(".wpgu-onboarding-answer-container input:checked+label>span");
var checkbox = [];
inputs.forEach(input=>{
    checkbox.push(input.textContent);
    console.log(input.textContent)
});

好运！

我想在 javascript 中捕获选中复选框的所有标签

I want to catch all labels of checked checkbox in javascript

javascript

google-tag-manager