点击父级时触发子级点击事件(HTML、CSS、JS)

<ul>
  <li key={ index } className={ `${ styles.option } ${ handleTravelTypesStyle( index ) }` } onclick="triggerCheckbox(event)">
    <input type="checkbox" name="traveltype1" id="traveltype1" onchange="handleTravelTypesInput(event.target)" />
    <label for="traveltype1">Type1</label>
  </li>
</ul>

JavaScript触发复选框点击:

您可以使用一个JavaScript函数,当 <li> 点击。此功能将在单击的 <李> 并手动触发其点击事件。

function triggerCheckbox(event) {
  // Prevent the default label click behavior to avoid double triggering
  event.preventDefault();

  // Find the checkbox inside the clicked <li>
  const checkbox = event.currentTarget.querySelector('input[type="checkbox"]');

  // Trigger the checkbox click event
  if (checkbox) {
    checkbox.click();
  }
}