在选中“全部”时,如何取消选中相关复选框?复选框并取消选择“全部”;复选框中的复选框
How can I de-select related checkboxes when checking "All" checkbox and de-select "All" checkbox when checking any of the related checkboxes?
我有一个带有多个复选框组的表单,每个复选框组都有一个相关的"All"选项,当单击该选项时,取消选中所有相关的复选框。当选中任何相关的复选框时,表单还需要取消选中"All"选项。基本上,表单可以提交"All"选项,任何相关选项,或者不提交任何选项。
当任何一个复选框被选中时,相关的标签被加粗,包括"All"选项。
我已经在jQuery中编写了这个逻辑,但是,我似乎无法让其中一个正常工作-当选中一个相关选项时取消选择"All"选项。当用户单击其中一个相关选项时,它会工作,但它也会取消选中刚刚选中的"All"选项。
我想我的问题是,我如何确定"源"事件是什么,所以我可以确定是否运行那一段代码?
带有"de-select 'All'"注释的演示:http://jsfiddle.net/8Ctvd/
JS:
$(function () {
$(".all").change(function () {
if ($(this).is(":checked")) $("input[rel='" + $(this).attr("rel") + "']:checked").not(".all").removeAttr("checked").change();
});
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) $("label[for='" + $(this).attr("id") + "']").css("font-weight", "bold");
else {
$("label[for='" + $(this).attr("id") + "']").css("font-weight", "normal");
/* THIS UNCHECKS THE ALL EVERYTIME
if ($(this).not(".all"))
$("input.all[rel='" + $(this).attr("rel") + "']").removeAttr('checked').change();
*/
}
});
});
HTML: <INPUT id=items_All class="checkbox all" name=items value=ALL type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_All>All</LABEL>
<INPUT id=items_1 class=checkbox name=items value=1 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_1>Item 1</LABEL>
<INPUT id=items_2 class=checkbox name=items value=2 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_2>Item 2</LABEL>
<INPUT id=items_3 class=checkbox name=items value=3 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_3>Item 3</LABEL>
<br />
<INPUT id=widgets_All class="checkbox all" name=widgets value=ALL type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_All>All</LABEL>
<INPUT id=widgets_1 class=checkbox name=widgets value=1 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_1>Widget 1</LABEL>
<INPUT id=widgets_2 class=checkbox name=widgets value=2 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_2>Widget 2</LABEL>
<INPUT id=widgets_3 class=checkbox name=widgets value=3 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_3>Widget 3</LABEL>
编辑
我已经调整了JS以适应我误解的要求。问题的一部分是你的逻辑有点偏离,可以大大简化。将格式化逻辑分离到一个单独的函数中,使您可以从检查中单独查看格式化。
$("input[type='checkbox']").change(function (e) {
var $o = $(this);
if ($o.hasClass("all")) {
//all box was checked, uncheck others
if ($o.prop("checked"))
$("input[rel='" + $o.attr("rel") + "']").not(this).prop("checked", false);
} else {
// other box was checked, uncheck all
if ($o.prop("checked")) {
$("input.all[rel='" + $o.attr("rel") + "']").prop("checked", false);
}
}
fixMarkup();
});
完整示例见这里:http://jsfiddle.net/8Ctvd/3/
原始回答
您正在使用attr
,这将在您的情况下给您不可预测的结果。同时,.is
比.prop
慢。您应该在jQuery中使用.prop
,它被转换为布尔值,并反映标记的当前状态,而不是其初始标记。参考这个SO答案。
同样,在最后的not('.all')
上调用.change()
,这将导致在"All"复选框上触发更改事件。查看更新后的提琴
我通过为相关复选框使用"click"事件解决了这个问题。这样,更改事件就不会触发它。
JS:
$('.all').change(function(){
if ($(this).is(':checked'))
$('input[rel="' + $(this).prop('rel') + '"]:checked').not('.all').removeProp('checked').change();
});
$('input[type="checkbox"]').change(function(e){
var $label = $('label[for="' + $(this).prop('id') + '"]');
if ($(this).is(':checked'))
$label.css('font-weight', 'bold');
else
$label.css('font-weight', 'normal');
});
$('input[type="checkbox"]').not('.all').click(function(e){
var $allCheckbox =
$('input.all[rel="' + $(this).prop('rel') + '"]');
if ($allCheckbox.is(':checked'))
$allCheckbox.removeProp('checked').change();
});
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- 使用jquery选中/取消选中单个复选框
- 使用javascript在页面加载时取消选中所有复选框
- (取消)使用单独的复选框激活复选框列表
- jQuery-取消选中复选框
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- Javascript选中/取消选中所有复选框并将值写入文本区域
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 使用Javascript根据组中的值选中或取消选中复选框
- 选中和取消选中 JavaScript 中的复选框
- 可以't取消选中该复选框(取消选中复选框时隐藏内容)
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- 如何使用复选框取消选中来清除单选按钮
- 复选框取消单击事件Javascript
- 选中复选框(取消)时显示另一个文本
- Javascript复选框取消选中其他复选框,反之亦然