如何通过单击父元素来选中复选框[重复]答案

【问题标题】：How to make check a checkbox by clicking on the parent element [duplicate]如何通过单击父元素来选中复选框[重复]
【发布时间】：2017-07-18 23:36:54
【问题描述】：

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

这是 jsfiddle 示例

https://jsfiddle.net/asbd4hpr/70/

和代码。

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

但我不确定这是否可用

【问题讨论】：

你打算使用 Vue 吗？
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript html css checkbox

【解决方案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>

【讨论】：

【解决方案2】：

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

然后一个伪 + position: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】：

这里有解决方案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>

【讨论】：

为什么不使用click()方法$('js-form-item:has(input[type=checkbox])').click(function (event) { if(event.target.type !== 'checkbox') { $(this).find('input[type=checkbox]').click(); } });