jQuery：建立全選複選框和子複選框之間的關係

這是一個標準的場景，我有一個全選複選框，它將根據自己的狀態選中或取消選中一組複選框。jQuery：建立全選複選框和子複選框之間的關係

$('.checkall').on('click', function() { 
    $(this) 
     .closest('#grid') 
     .find('#tblId') 
     .find(':checkbox') 
     .prop('checked', this.checked); 
});

如果孩子複選框被單獨修改，我操控檢查所有複選框的狀態是這樣的：

$('.child-checkbox').change(function() { 
    if ($('.child-checkbox:checked').length == $('.child-checkbox').length) { 
     $('.checkall').prop('checked', true); 
    } 
    else { 
     $('.checkall').prop('checked', false); 
    } 
});

我很高興，這是工作正常，但我想知道如果我可以將這兩個片段合併成一個片段來管理全部複選框和子複選框之間的關係。

來源

2013-10-07 Animesh

你可以捕捉所有複選框點擊，一個d檢查一個函數的類，但你做的方式更清潔恕我直言 –

爲什麼你使用'.closest（）'和'.find（）'通過ID選擇元素？如果你知道id，你可以使用'$（'＃tblId'）'，假設你有一個有效的html，id是唯一的......我會解決這個問題，然後再考慮組合你的兩個函數。 – nnnnnn

@nnnnnn：爲了解決這個問題，我可能已經引入了一些冗餘，但實際上，子複選框與checkall複選框位於不同的位置，它需要使用'.closest（）'，我發現它是當時更快的解決方案。另外，我很難控制HTML。 – Animesh

我不認爲它可以很好地組合成一個片段，但是從我可以看到它可以簡化爲

var $all = $('.checkall').on('click', function() { 
    $childs.prop('checked', this.checked); 
}); 
var $children = $('.child-checkbox').change(function() { 
    $all.prop('checked', $children.not(':checked').length != 0); 
});

如果你還在尋找一個單一的處理程序然後嘗試

$('.checkall, .child-checkbox').change(function() { 
    if ($(this).is('.checkall')) { 
     $('.child-checkbox').prop('checked', this.checked); 
    } else { 
     $('.checkall').prop('checked', $children.not(':checked').length != 0); 
    } 
})

來源

2013-10-07 12:14:17

我愛你的第一個片段。在眼睛上很容易。分組選擇器是我目前不知道的，這看起來很基本。 – Animesh

這樣東西看它是否有助於

$('.checkall,.child-checkbox')on('click', function() { 
    if(this==".checkall"){ 
     $(this) 
      .closest('#grid') 
      .find('#tblId') 
      .find(':checkbox') 
      .prop('checked', this.checked); 
    }else{ 
     if ($('.child-checkbox:checked').length == $('.child-checkbox').length) { 
      $('.checkall').prop('checked', true); 
     } 
     else { 
      $('.checkall').prop('checked', false); 
     } 

    } 
    });

來源

2013-10-07 12:18:04 Shashank

jQuery：建立全選複選框和子複選框之間的關係

回答

相關問題