Question

正如标题所示，我试图点击包含复选框的div，并仅使用父元素选中/取消选中它。

这是jsfiddle示例

和代码。

HTML

<div class="js-form-item">
    <input class="solution-subtype-checkboxes" type="checkbox" id="solution-subtype-checkboxes" value="">
    <label for="edit-tpe-option-a-checkboxes-accs-au-module-note-de-frais" class="option">checkbox label</label>
</div>

的CSS：

.js-form-item{
  border:1px solid red; 
  padding:50px; 
  max-width:100px; 
  max-height:100px; 
}

但我不确定这是否可用

Answer 1

我只是将div.js-form-item转换为label复选框（同样将内部label转换为span。）您还必须使label成为块元素。

.js-form-item{
  display: block;
  border:1px solid red; 
  padding:50px; 
  max-width:100px; 
  max-height:100px; 
}

<label class="js-form-item">
	<input class="solution-subtype-checkboxes" type="checkbox" id="solution-subtype-checkboxes" value="">
	<span for="edit-tpe-option-a-checkboxes-accs-au-module-note-de-frais" class="option">checkbox label</span>
</label>

Answer 2

您可以使用解决方案https://jsfiddle.net/asbd4hpr/72/

clickedOn = function() {
	var val = document.getElementById('solution-subtype-checkboxes').checked;
  document.getElementById('solution-subtype-checkboxes').checked = !val;
}

.js-form-item{
  border:1px solid red; 
  padding:50px; 
  max-width:100px; 
  max-height:100px; 
}

<div class="js-form-item" onclick="clickedOn();">
	<input class="solution-subtype-checkboxes" type="checkbox" id="solution-subtype-checkboxes" value="">
	<label for="edit-tpe-option-a-checkboxes-accs-au-module-note-de-frais" class="option">checkbox label</label>
</div>

Answer 3

您可以使用标签如果 for属性指向正确 id 输入。

然后是伪+位置：relative / absolute将覆盖所有区域。

.js-form-item{
  border:1px solid red; 
  padding:50px; 
  max-width:100px; 
  max-height:100px; 
  position:relative;/* make it reference for absolute children */
}

.js-form-item label:before {
  position:absolute;/* being part of the label,lets stick it and let it catch the pointer-events */
  content:'';/*make it be */
  /* size it to cover the closest relative(or absolute/fixed) parent */
  top:0;
  bottom:0;
  right:0;
  left:0;
}

<div class="js-form-item">
  <input class="solution-subtype-checkboxes" type="checkbox" id="solution-subtype-checkboxes" name="" value="">
  <label for="solution-subtype-checkboxes" data-id="edit-tpe-option-a-checkboxes-accs-au-module-note-de-frais" class="option">checkbox label</label>
</div>

我更新了for属性并将其旧值发送到数据属性，以允许从javascript或CSS使用它。

小提琴：https://jsfiddle.net/asbd4hpr/70/

如何通过单击父元素来选中复选框

3 个答案: