单击<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，然后当您单击文本时，它会选中复选框。

演示

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