![](/img/trans.png)
[英]Checking Other Checkboxes when I Select a Checkbox - Not a “Select All” Checkbox
[英]How can I de-select related checkboxes when checking “All” checkbox and de-select “All” checkbox when checking any of the related checkboxes?
我有一個包含多個復選框組的表單,每個復選框組都有一個相關的“全部”選項,當單擊該復選框時,將取消選擇所有相關的復選框。 選中任何相關復選框后,表單還需要取消選中“所有”選項。 基本上,表單可以提交“全部”選項,任何相關選項或不提交任何選項。
選中任何一個復選框后,相關標簽將變為粗體,包括“所有”選項。
我已經在jQuery中編寫了此邏輯,但是,我似乎無法正常工作-在選中相關選項之一后,取消選擇“全部”選項。 當用戶單擊相關選項之一時,它可以工作,但是在選中它之后,也可以取消選中“所有”選項。
我想我的問題是,如何確定“源”事件是什么,以便確定是否運行那段代碼?
帶有“取消選擇'全部'”的演示已注釋掉: 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()
上調用.change()
,這會導致更改事件在“所有”復選框上觸發。 檢查此更新的小提琴。
我通過使用相關復選框的“ 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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.