我想根据div 标签中包含的复选框是否被取消,将特定类应用于div。但我无法应用或删除该类。你能通过指导我如何实现这一目标来帮助我吗?以下是我的代码:
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
</p>
<p class="custom-form">
<div class="ez-checkbox">
<input id="" class="custom-check checkBoxClass ez-hide ez-checked" type="checkbox" name="item[]"></input>
</div>
<label>
J2P: Electromagnetic Waves
</label>
</p>
<p class="custom-form">
<div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
</div>
<label>
NEET XII Testlet : Electrostatics 2
</label>
</p>
<p class="custom-form">
<div class="ez-checkbox">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name="item[]"></input>
</div>
<label>
J2P: Ray Optics & Optical Instruments
</label>
</p>
<p class="custom-form">
<div class="ez-checkbox">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
</div>
<label>
NEET XII Testlet : Electrostatics 2
</label>
</p>
<p class="custom-form">
<div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name="item[]"></input>
</div>
<label>
J2P: Electromagnetic Waves
</label>
</p>
<p class="custom-form">
<div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
</div>
<label>
NEET XII Test : Electrostatics
</label>
</p>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox input:not(:disabled)").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox input:not(:disabled)").addClass("ez-checked");
});
});
</script>
我尝试了很多东西来实现,但不能。请帮助我实现它。提前谢谢。
您的代码工作正常,尽管可以简化。
http://jsfiddle.net/JYaPx/1/
$("#ckbCheckAll").click(function () {
$(".ez-checkbox input:enabled").toggleClass("ez-checked", this.checked);
});
如果它似乎不起作用,要么是 jQuery 没有加载,要么是你的ez-checked
风格没有产生视觉上的区别。
如果要将类添加到div
,请使用 .parent()
或 .closest()
。
$("#ckbCheckAll").click(function () {
$(".ez-checkbox input:enabled").closest("div")
.toggleClass("ez-checked", this.checked);
});
如果要将类添加到input
和div
,请组合这两种解决方案。
$("#ckbCheckAll").click(function () {
$(".ez-checkbox input:enabled").toggleClass("ez-checked", this.checked)
.closest("div")
.toggleClass("ez-checked", this.checked);
});
要添加/删除包含div 的类,您只需要使用父选择器:
下面是一个工作示例:
http://jsfiddle.net/LWNXd/
// This follows the same logic as your current code, just written slightly different
$(document).ready(function() {
$('#formA').on('click', '.ez-checkbox input:not(:disabled)',function(){
var elem = $(this);
elem.parent('div')[ ((elem.is(':not(:checked)')) ? 'remove':'add')+'Class']('ez-checked');
});
});