我想在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;
}

这个脚本给了我所有的值，但这些都是非描述性的值。但我想要描述性标签。

有没有办法使用所有选中复选框的类 .wpgu-onboarding-answer-title 来捕获跨度内的文本？

提前致谢

埃里克。

Answer 1

除了上一个解决方案，想分享一个基于问题中提到的代码的更简单的解决方案。解决方案可以很简单，只需获取类为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 类仅用于此目的，而不是之前页面中的任何其他位置。

Answer 2

基于使用 jQuery 的this answer，您可以使用属性选择器和要为其获取标签的元素的 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 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)
});

祝你好运！