Question

How can I make sure that when I click on the text in <a> the checkbox is activated? Now when someone click on the text of the checkbox the drop down menu closes. This is a simple snippet:

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

I try to set a cursor: pointer in the tag <a> but without success

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>

点击<a> text to checked input

2 个答案: