点击带内边距的<li>时触发checkbox的change事件（HTML、CSS、JS）

方案一：利用<label>原生特性（推荐） #

直接把<label>设为块级元素，让它占满整个<li>的空间，这样点击<li>的任何区域（包括内边距）都会触发<label>的点击事件，进而联动对应的checkbox切换状态。

调整后的代码：

<ul>
  <li key={ index } className={ `${ styles.option } ${ handleTravelTypesStyle( index ) }` }>
    <input type="checkbox" name="traveltype1" id={`traveltype-${index}`} onChange={(event) => handleTravelTypesInput(event.target)}/>
    <label htmlFor={`traveltype-${index}`} className={styles.label}>Type1</label>
  </li>
</ul>

配套CSS：

.option {
  /* 移除li原有内边距，把内边距移到label上 */
  padding: 0;
}

.label {
  display: block;
  padding: 10px 15px; /* 设置你需要的内边距值 */
  cursor: pointer;
}

/* 可选：添加hover反馈提升体验 */
.label:hover {
  background-color: #f5f5f5;
}

原理：<label>和<input>通过id与for关联，点击<label>任意区域都会触发checkbox状态切换，让label占满li空间就能实现点击li任意区域触发change事件。

方案二：给<li>绑定点击事件（适合不想修改CSS的场景） #

如果不想调整样式，直接给<li>加点击事件，手动切换checkbox状态并触发change回调：

<ul>
  <li 
    key={ index } 
    className={ `${ styles.option } ${ handleTravelTypesStyle( index ) }` }
    onClick={(e) => {
      // 避免点击checkbox本身时重复触发
      if (e.target.tagName !== 'INPUT') {
        const checkbox = e.currentTarget.querySelector('input[type="checkbox"]');
        checkbox.checked = !checkbox.checked;
        // 手动触发change事件，确保回调函数执行
        checkbox.dispatchEvent(new Event('change'));
      }
    }}
  >
    <input type="checkbox" name="traveltype1" id={`traveltype-${index}`} onChange={(event) => handleTravelTypesInput(event.target)}/>
    <label htmlFor={`traveltype-${index}`}>Type1</label>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Oussama Baroud