如何使整个自定义复选框/Div可点击——不仅仅是标签+输入框

Question

如何使整个自定义复选框/Div可点击——不仅仅是标签+输入框

14

我有自定义的复选框，样式类似按钮。当你点击标签或输入时，周围的div会改变颜色。但是，只有标签和输入是可点击的。

有没有办法使整个div/按钮可点击（即边框内的所有内容）？

这是我的代码：

div.label {  
    border:solid 1px gray;
    line-height:40px;
    height:40px;
    width: 250px;
    border-radius:40px;
    -webkit-font-smoothing: antialiased; 
    margin-top:10px;
    font-family:Arial,Helvetica,sans-serif;
    color:gray;
    text-align:center;
}

label {
    display:inline;
    text-align:center;
}

input[type=checkbox] {
    display: none;
}

input:checked + div {
    border: solid 1px red;
    color: #F00;
}

input:checked + div:before {
    content: "\2713";
}

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
    <label for="lists[Travel]">Travel</label> <br>
</div>

- amyyyyy

2个回答

5

以下是一种实现方法：

<div onclick="this.querySelector('input[type=checkbox]').click()">
  <input type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

或者如果您给复选框设置了 id：

<div onclick="abc.click()">
  <input id="abc" type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

你需要在这个方法中使用 pointer-events:none ，否则当你直接点击复选框时会发生双击（导致选中和取消选中）。

- joe

1

"pointer-events: none" 对于自定义的 Bootstrap 复选框无效。在 onclick 中，使用 "if (event.target == this) { this.querySelector('input[type=checkbox]').click(); }" 解决了问题。 - e-frank

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Axel · Accepted Answer

答案很简单：您不需要额外的

元素。实际上，您可以将元素放置在任何位置，并将其与您选择的元素相关联。

通过给元素添加id属性，并使用相应的for属性将元素与之关联来实现此目的。

例如：<input id="my-input-id">[...]<label for="my-input-id">Label Text</label>)

一个 <label> 元素可以通过将控件元素放在其内部或使用 for 属性与控件关联。这样的控件称为标记控件。一个输入控件可以与多个标签关联。

标签本身并不直接与表单相关联。它们只通过与其关联的控件间接地与表单相关联。

当单击或点击与表单控件相关联的 <label> 时，还会触发相应控件的 click 事件。

资料来源: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

label {
    display:block;
    border:solid 1px gray;
    line-height:40px;
    height:40px;
    width: 250px;
    border-radius:40px;
    -webkit-font-smoothing: antialiased; 
    margin-top:10px;
    font-family:Arial,Helvetica,sans-serif;
    color:gray;
    text-align:center;
}

input[type=checkbox] {
    display: none;
}

input:checked + label {
    border: solid 1px red;
    color: #F00;
}

input:checked + label:before {
    content: "\2713 ";
}


/* new stuff */
.check {
    visibility: hidden;
}

input:checked + label .check {
    visibility: visible;
}

input.checkbox:checked + label:before {
    content: "";
}

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<label for="lists[Travel]">Travel with jump</label>

<!-- alternatively avoid jumps between text of state checked and unchecked -->

<input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" />
<label for="lists[new]"><span class="check">✓</span> Travel without jump</label>

此外，您可以调整的display:block。但是这应该很简单，只需给它float:left，display:inline-block或其他任何东西即可使所需元素浮动。

CODEPEN