如何在取消选中几个复选框后使“全选”复选框可用
How to make the all select checkbox workable upon deselecting few of the checkboxes?
我的网站使用PHP和Smarty。为了供您参考,我将smarty模板中的代码片段与jQuery代码放在这里:
<div class="spl-btn-wrap fl-left">
<div class="spl-btn-in">
<div class="spl-btn">
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
</div>
</div>
</div>
<table class="tablesorter" cellpadding="0" cellspacing="0" border="0" id="tests_listing" width="100%">
{section name=tests loop=$all_tests}
<tr id="tests_listing-row-{$all_tests[tests].test_id}"><td class="dragHandle">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tbl-test" >
<tr>
<th align="left">
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="">
<label>{$all_tests[tests].test_name}</label>
</p>
</th>
</tr>
</table>
</td></tr>
{sectionelse}
</table>
{literal}
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".view_test_details").colorbox({width:800, href:$(this).attr('href')});
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
$(".checkBoxClass").click(function(){
var all = $('.checkBoxClass');
if (all.length === all.filter(':checked').length) {
//$("p#parentCheckbox div").addClass("ez-checked");
$("#ckbCheckAll").prop("checked", true);
} else {
//$("p#parentCheckbox div").removeClass("ez-checked");
$("#ckbCheckAll").prop("checked", false);
}
if (!$(this).prop("checked")){
//$("p#parentCheckbox div").removeClass("ez-checked");
$("#ckbCheckAll").prop("checked",false);
}
});
});
</script>
{/literal}
现在的场景是,当页面完全加载时,以下代码围绕复选框进行包装,如下所示:
<div class="ez-checkbox">
<input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
</div>
选中复选框后,名为"ez checked"的类添加到div中,如下所示:
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
</div>
取消选中复选框后,类将被删除。我想研究一下应用和删除"ez checked"类的基本思想。现在我想添加典型的全选复选框功能。我已经为它编写了代码。但问题是它适用于所有复选框。如果也选择了几个复选框,我想让它变得可行。你能帮我解决我的问题吗?提前谢谢。如果你需要任何进一步的信息,我可以为你提供同样的信息。
试试这个(已编辑):
$('.checkBoxClass').on('change', function(e){
var $target = $(e.target);
$target.closest('div.ez-checkbox').toggleClass('ez-checked',$target.is(':checked'));
})
在这里上传了一个演示:
http://jsfiddle.net/m7gzf/
相关文章:
- 复选框/单选按钮-添加所选项目的总价
- JavaScript 复选框全选、取消全选、反转选择
- 如何知道JqGrid多选'全选'复选框被选中
- 棱角多复选框 全选
- 如何使用 rails3-jquery-autocomplete 更新复选框/单选按钮
- 燃油 UX 复选框全选
- IE issue-使用复选框/单选按钮时,jQuery.change()不会触发回调
- 引导复选框/单选按钮不改变<输入>价值
- Jquery对复选框勾选状态的影响
- 更新全选/取消全选复选框
- 样式复选框&单选按钮
- 勾选复选框全选,并刷新数据表
- AJAX多个复选框/多选
- 只有一个复选框被选中和值
- 如何使用angularjs验证复选框(必选)
- jQuery缓存刷新复选框单选按钮状态
- 基于复选框单选按钮调整总成本标价
- 自定义复选框/单选按钮,不用ID和FOR,也不用angular.js
- 我如何有一个复选框/单选按钮张贴到一个文本区,当我点击提交按钮
- 角度复选框“全选”功能不起作用