javascript - 如何获取选定复选框的标签

Question

我想知道如何在选择这些复选框时仅返回这些复选框中的标签。这是代码:

<label class="threeLabel">
    <input type="checkbox" id="chkBusinessActivityStore" name= "Business" class="validate-reqchk-byname label: 'Business Activity'" > "&nbsp;&nbsp;Store"
</label>
<label class="threeLabel">
    <input type="checkbox" id="chkBusinessActivityCoffeeShop" name= "Business" class="validate-reqchk-byname label: 'Business Activity'" > "&nbsp;&nbsp;Coffee Shop"
</label>
<label class="threeLabel">
    <input type="checkbox" id="chkBusinessActivityBar" name= "Business" class="validate-reqchk-byname label: 'Business Activity'" > "&nbsp;&nbsp;Bar"
</label>

Answer 1

您需要更正您的 html 语法(关闭元素等)。然后，您可以将单击事件监听器添加到输入中，检查它们是否被“选中”，并从父标签获取标签文本。例如:

const inputs = document.querySelectorAll('input');
for (const input of inputs) {
  input.addEventListener('click', (event) => {
    const elem = event.currentTarget;
    if (elem.checked) {
      const label = elem.parentNode.textContent;
      console.log(label);
    }
  });
}

<label class="threeLabel">
  <input type="checkbox" id="chkBusinessActivityStore" name="Business" class="validate-reqchk-byname label: 'Business Activity'">
  &nbsp;&nbsp;Store
</label>
<label class="threeLabel">
  <input type="checkbox" id="chkBusinessActivityCoffeeShop" name="Business" class="validate-reqchk-byname label: 'Business Activity'">
  &nbsp;&nbsp;Coffee Shop
</label>
<label class="threeLabel">
  <input type="checkbox" id="chkBusinessActivityBar" name="Business" class="validate-reqchk-byname label: 'Business Activity'">
  &nbsp;&nbsp;Bar
</label>