如何使用 Java 脚本获取 <label for> 值 [重复]

Question

我的 HTML 页面中有一些复选框。而且每个组件都有属性。如果选中该复选框，我需要获取该值。

以下是我的 HTML 代码

<div class="col-6 col-12-small">
    <h4>Document Submited</h4>
	<input type="checkbox" id="idcopy" name="checkbox">
	<label for="idcopy">NIC Copy</label>
	<input type="checkbox" id="birthcertificate" name="checkbox">
	<label for="birthcertificate">Birth Certificate</label>
	<input type="checkbox" id="nomineeNic" name="checkbox">
	<label for="nomineeNic">Nominee NIC copy</label>
	<input type="checkbox" id="agreement" name="checkbox">
	<label for="agreement">Agreement</label>
</div>

我已经尝试使用 document.getElementById(idcopy).text() 来获取文本

Answer 1

您通过attr(name) 调用获取所有元素属性 ....

$(':checkbox').on('click',function() {
  if(this.checked) {
  console.log($(this).next('label').attr('for'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6 col-12-small">
    <h4>Document Submited</h4>
	<input type="checkbox" id="idcopy" name="checkbox">
	<label for="idcopy">NIC Copy</label>
	<input type="checkbox" id="birthcertificate" name="checkbox">
	<label for="birthcertificate">Birth Certificate</label>
	<input type="checkbox" id="nomineeNic" name="checkbox">
	<label for="nomineeNic">Nominee NIC copy</label>
	<input type="checkbox" id="agreement" name="checkbox">
	<label for="agreement">Agreement</label>
</div>

Answer 2

// Get all input fields
const allInputs = Array.from(document.querySelectorAll('input'));

// Whenever any input field change
const handleInputChange = e => {
  
  // Create a values array for each checked input
  const values = allInputs.reduce((acc, input) =>
  
    // If field is checked
    input.checked
    
      // Add its label content to values array
      ? [...acc, document.querySelector(`label[for="${input.id}"]`).textContent]
      
      // Or return return previous array
      : acc, []);

  console.log(values);
};

// Bind event on all input fields
allInputs.forEach(input => input.addEventListener('change', handleInputChange));

<div class="col-6 col-12-small">
    <h4>Document Submited</h4>
	<input type="checkbox" id="idcopy" name="checkbox">
	<label for="idcopy">NIC Copy</label>
	<input type="checkbox" id="birthcertificate" name="checkbox">
	<label for="birthcertificate">Birth Certificate</label>
	<input type="checkbox" id="nomineeNic" name="checkbox">
	<label for="nomineeNic">Nominee NIC copy</label>
	<input type="checkbox" id="agreement" name="checkbox">
	<label for="agreement">Agreement</label>
</div>

您可能还具有可重复使用的功能，例如：

const getLabel = (labelFor, rootElement = document) =>
  rootElement.querySelector(`label[for="${labelFor}"]`);

// Or to get text content directly:
const getLabel = (labelFor, rootElement = document) =>
  (rootElement.querySelector(`label[for="${labelFor}"]`) || {}).textContent;

// Boolean || is there to avoid throwing error when no matching label found in DOM

虽然，对于更简单的代码，您可以将想要从复选框中获取的数据直接放在复选框属性中（例如：<input type="checkbox" id="myId" data-myCustomData="My data if box is checked" />），或者放在 JS 对象中：

const myData = {
  checkboxId1: "Data for first checkbox foo",
  checkboxId5: "Data for first checkbox bar",
};