时间戳

首页 > 解决方案 > 如何使复选框只能在复选框上单击？

html - 如何使复选框只能在复选框上单击？

问题描述

 <label style="display: flex; align-items: center">
                      <input
                        type="checkbox"
                        style="margin-right: 12px"
                        class=""
                        checked="checked"
                        name="sameadr"
                      />
                      <span class="reach-out"> Reach out to me on</span
                      ><span class="whatsapp-icon"></span>
                      <span class="whatsapp-content"> Whatsapp</span>
                    </label>

我有一个复选框，但问题是，如果我也点击内容，我可以选中复选框。

但是我需要复选框来选择，如果我只点击复选框而不是内容。

标签： htmlcss

解决方案

不要使用标签，用其他东西代替它。

将输入嵌套在标签中会自动将其与标签相关联。

 <div style="display: flex; align-items: center">
                      <input
                        type="checkbox"
                        style="margin-right: 12px"
                        class=""
                        checked="checked"
                        name="sameadr"
                      />
                      <span class="reach-out"> Reach out to me on</span
                      ><span class="whatsapp-icon"></span>
                      <span class="whatsapp-content"> Whatsapp</span>
                    </div>

或者，将标签移动到输入之后，只是不要将两个链接在一起。

<input type="checkbox" style="margin-right: 12px" class="" checked="checked" name="sameadr" />
<label>
                      <span class="reach-out"> Reach out to me on</span
                      ><span class="whatsapp-icon"></span>
                      <span class="whatsapp-content"> Whatsapp</span>
                      </label>

推荐阅读