单击<a>文本检查输入

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

我建议您使用标签标签将其与复选框关联起来。另外，我在您的代码中插入了一些不同的语义标记:请随意将其更改回。

关于下拉关闭，您可以停止单击事件以在复选框中传播它的检查，这样就不会触发用于单击的引导事件侦听器。

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

Answer 2

只需将您的a转换为label，然后当您单击文本时，它会选中复选框。

Demo

​

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

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

​