Question

这似乎是一个简单的问题，但我不使用很多javascript。

我有一个div，其中有一个复选框，并希望整个div切换复选框。这就是我到目前为止所做的：

<div style="padding: 2em; border: 1px solid"
     onClick="if (document.getElementById('cb').checked) document.getElementById('cb').checked=false; else document.getElementById('cb').checked=true;">
  <input name="cb" id="cb" type="checkbox">
</div>

唯一的问题是，当您单击实际复选框时，它会切换两次，因此不会更改。

有什么想法吗？

Answer 1

您可以通过使用label元素包装要单击的区域，以更强大且可访问的方式实现此功能。

例如：

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

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

Answer 2

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

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

Answer 4

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

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

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

onClick="event.stopPropagation();"

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

Answer 5

研究使用jQuery而不是自己编写dom编程。使用像jQuery这样的库意味着你的代码更有可能在大多数浏览器上运行

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

Answer 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-->

代码集中的CSS和JS已更新

Answer 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>

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

7 个答案: