javascript - 单击 文本以检查输入

Question

我如何确保当我点击 <a> 中的文本时复选框被激活？现在，当有人单击复选框的文本时，下拉菜单将关闭。这是一个简单的片段:

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <a class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </a>
</div>

我尝试设置一个 cursor: pointer在标签 <a>但没有成功

Answer 1

我建议您使用 label 标记将其与复选框相关联。此外，我在您的代码中插入了一些不同的语义标记:您可以随意将其改回。

关于下拉关闭，你可以停止点击事件在复选框切换它的检查时传播，这样点击的引导事件监听器就不会被触发

<ul id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
  <li class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
    <label class='dropdown-item' onclick='event.stopPropagation();'> 
      <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </label>
  </li>
</ul>