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>

你需要的一切。样式标签就像您最后添加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>

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

1 个答案: