时间戳

首页 > 解决方案 > 如何获取选定复选框的标签

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

问题描述

我想看看在选择这些复选框时如何只返回这些复选框中的标签。这是代码：

<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>

标签： javascriptcheckbox

解决方案

您需要更正您的 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>

推荐阅读