[英]Toggle checkbox - click on parent DIV element
I have few div elements and inside every div one checkbox. 我的div元素很少,并且每个div中都包含一个复选框。 On click this div I want to check/uncheck checkbox and add class like active or checked.
在单击此div时,我要选中/取消选中复选框,并添加活动或已选中的类。 Have some code if you have any idea.
如果您有任何想法,请提供一些代码。
<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>
using this code: 使用此代码:
$(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');
should have a .
应该有一个
.
like in 像
$(this).attr('id');
That's it. 而已。
Why using DIV and JS when we have <label>
for that purpose ! 当我们为此目的使用
<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>
all you need. 一切你需要的。 Style label as you would for your DIV by just adding eventually
display: block;
就像添加DIV一样,通过最终添加
display: block;
样式标签display: block;
Or you can even move the inputs before the label and style the complete LABEL elements in pure CSS: 或者甚至可以将输入移动到标签之前,并在纯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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.