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

Toggle checkbox - click on parent DIV element

本文关键字：DIV 元素 单击 复选框      更新时间：2023-09-26

我有几个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'));
});

$(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>

相关文章：