javascript - 切换复选框 - 单击父 DIV 元素

Question

我有几个 div 元素，并且每个 div 内都有一个复选框。单击此 div 时，我想选中/取消选中复选框并添加事件或选中等类。如果您有任何想法，请提供一些代码。

<div class="filter">
    <div id="select_10">
       <input type="checkbox" name="what" />
       visible1
    </div>
    <div id="select_91">
       <input type="checkbox" name="ever" />
       visible2
    </div>
    <div id="select_101">
       <input type="checkbox" name="whatever" />
       visible3
    </div>    
</div>

使用此代码:

$(document).on("click", "div.filter div", function (event) {
    var target = $(event.target);
    var id = $(this)attr('id');
    if (target.is('div#'+id+' input:checkbox')) {
        return;
    }
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.prop("checked", !checkbox.is(':checked'));
});

Answer 1

$(this)attr('id');应该有 .就像在

$(this).attr('id');

就是这样。

<小时/>

当我们有 <label> 时，为什么要使用 DIV 和 JS 为此目的!

.filter label {
  cursor: pointer;
  display: block;
  background: #eee;
  margin:5px; padding: 10px;
}

<div class="filter">
  <label id="select_10">
    <input type="checkbox" name="what" />
    visible1
  </label>
  <label id="select_91">
    <input type="checkbox" name="ever" />
    visible2
  </label >
  <label id="select_101">
    <input type="checkbox" name="whatever" />
    visible3
  </label >    
</div>

你需要的一切。样式标签就像您为 DIV 所做的那样，只需最后添加 display: block;

<小时/>

或者您甚至可以将输入移动到标签之前，并在纯 CSS 中设置完整 LABEL 元素的样式:

.filter input{
  position: absolute;
  visibility: hidden;
}

.filter label {
  cursor: pointer;
  display: block;
  margin:5px; padding: 10px;
  background: #eee;
}

.filter input:checked + label{
  background: #cf5;
}

.filter                 label:before{content: "\2610";}
.filter input:checked + label:before{content: "\2611";}

<div class="filter">
  
  <input  id="ckb_10" type="checkbox" name="what" />
  <label for="ckb_10">
    what
  </label>
  
  <input  id="ckb_91" type="checkbox" name="foo" />
  <label for="ckb_91">
    foo
  </label>
  
</div>