单击 div 以使用 javascript 切换其中的复选框答案

【解决方案1】：

您可以通过使用标签元素包裹您想要点击的区域，以一种更强大、更易于访问的方式来实现这一点。

例如：

<label for="cb">
    <div style="padding: 2em; border: 1px solid">
        <input name="cb" id="cb" type="checkbox">
    </div>
</label>

上面的代码我没有测试过，但是我相信所有的浏览器都支持点击标签检查输入框。

【讨论】：

我对网络东西还很陌生，实际上我从未使用过。如果它比在
和上都有 onClick 属性更整洁，那可能很好，但我不确定如何使用它。
我刚刚阅读了一篇相关文章，在这里进行了解释：stackoverflow.com/questions/2123/… 谢谢，我想我会尝试一下。
您甚至可以将样式属性放入标签元素本身并完全丢弃 div。
我似乎无法让标签跨越整个
，它只跨越复选框的实际标签。我实际上打算在 div 和复选框内有一个图像，但不能让标签覆盖所有这些。无论如何，谢谢，那会更干净。
我需要显示：块；并将 div 替换为标签：
一个小盒子！

【解决方案2】：

onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"

【讨论】：

谢谢，我知道它会像那样简单！我做了类似的事情，但把它塞满了:)
我知道这已经晚了一年，但我认为这是最好的答案，因为它涵盖了更多情况。如果您想让<TR> 元素可点击，label 方法将不起作用，而这肯定会起作用。

【解决方案3】：

根据之前的一些答案，这对我来说最适合这样的 html：

<div class="option_item">
  <input type="checkbox" value="1" checked="checked">
</div>

像这样的jQuery：

$.fn.toggleCheckbox = function() {
  this.attr('checked', !this.attr('checked'));
}

$(document).ready(function(){
  $(".option_item").click(function (e) {    
    if (e.target.tagName != 'INPUT') {
      $(this).find("input").toggleCheckbox();
      return false;
    }
  });
);

【讨论】：

【解决方案4】：

问题的根源在于，当您单击复选框时，单击事件会沿 DOM 向上传播到父元素。

所以复选框通过切换自身来处理点击事件，然后DIV接收到点击事件并再次切换复选框。

最简单的解决方案是通过将其添加到输入元素来停止事件的传播：

onClick="event.stopPropagation();"

虽然这是在 W3C DOM Level 2 事件模型中定义的，但可能并非所有浏览器都支持它，因此您可能需要使用 Prototype 或 jQuery 等跨浏览器库来确保兼容性。

【讨论】：

【解决方案5】：

考虑使用 jQuery 而不是自己针对 dom 进行编程。使用像 jQuery 这样的库意味着您的代码更有可能在大多数浏览器上运行

http://docs.jquery.com/Effects/toggle

【讨论】：

【解决方案6】：

这是我对 div 复选框的实现

链接：https://codepen.io/ashwinshenoy/pen/oYXqMV

       <div id="checkboxes">
            <input type="checkbox" name="rGroup" class="check_cat" value="Adventure Sports" id="r1"/>
            <div class="check_overlay">
                <i class="fa fa-check-circle"></i>
            </div>
            <label class="whatever" for="r1">
                <img src="http://i.imgur.com/SfQVTlR.png" class=" img-responsive width100" />
                <div class="row">
                    <div class="col-xs-offset-3 col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-user"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                    <div class="col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-bitbucket"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                </div><!--inner row end-->
            </label>
            <br>
            <div class="check_name_div">
                Adventure Sports
            </div>
        </div><!--checkboxes end-->

codepen 中的 CSS 和 JS 更新

【讨论】：

【解决方案7】：

试试，

.switch_ {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch_ input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff2626;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switch_slider {
  background-color: #12e4a0;
}

input:focus + .switch_slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switch_slider.round {
  border-radius: 34px;
}

.switch_slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div align="center"><label class="switch_">
  <input type="checkbox" id="size_act">
  <span class="switch_slider round"></span>
</label> 
</div>
<div align="center" onClick="$('#size_act').click();">Inactive / Active</div>

【讨论】：