jQuery單擊事件與綁定事件

Question

嗨，大家好，我對活動有疑問。 我有一個復選框列表，並且有一個主復選框可以選中所有復選框。 當我單擊事件時，我的某些復選框列表項應將data-id attr添加到“選定的obj”。 因此，在我的情況下，當我按下主復選框以檢查所有其他內容時，一切正常（只需單擊所有其他元素）。 但是當我這樣做時，它會清空我的數組。 我的意思是，如果我取消選中它將是應該被選中的方式（當我選中它為空時將其取消填充的時候）。

......    
var selected = {};
        var reload = function(){
            selected = {};
            $('.checkbox_all').unbind('click');
            $('.table_checkbox').unbind('click');
            $('.checkbox_all').bind('click', checkAll);
            $('.table_checkbox').bind('click', checkMe);
        }
        var checkMe = function(e){
            var checkbox = $(e.target);
            var id = checkbox.attr('data-id');
            //console.log(id);
            if(checkbox.attr('checked')){
                selected[id] = id;
            }else{
                if(selected[id]) delete selected[id];
            }
            console.log(selected);
        }
        var checkAll = function(e){
            if($(e.target).attr('checked')){
                $('.table_checkbox').each(function(){
                    if($(this).attr('checked') === false){
                        $(this).click();
                    }
                });
            }else{
                $('.table_checkbox').each(function(){
                    if($(this).attr('checked') === true){
                        $(this).click();
                    }
                });
            }
            //console.log(selected);
        }
.......

HTML：

       <tr><th class="table-header-check"><input type="checkbox" class="checkbox_all"/></th></tr>
    <tr class=""><td><input type="checkbox" data-id="5" class="table_checkbox"></td></tr>
    <tr class="alternate-row"><td><input type="checkbox" data-id="6" class="table_checkbox"</td></tr>
    <tr class="alternate-row"><td><input type="checkbox" data-id="8" 

....ETC\

我的問題是，當我單擊.checkbox_all時，應該單擊所有.table_checkbox（r已支配或未支配）...它只是像主復選框一樣單擊所有復選框...可以正常工作，但我有一個事件所有其他復選框如果我單擊em，則當我取消單擊em時，它將一些數據添加到數組中。...因此，當我分別單擊復選框時，它們會正確地添加/刪除數據到數組中...但是，當我單擊主復選框時，...它單擊正確的復選框，但是當所有選中時數據數組為空，而所有未選中時數據數組為滿...它必須是相反的

Answer 1

您是否可以尋求更清潔的解決方案，並即時生成所選內容？ 請參見此處的示例（以及其他所有人的JSFiddle）： http : //jsfiddle.net/turiyag/3AZ9C/

function selected() {
    var ret = {};
    $.each($(".table_checkbox"),function(index,checkbox) {
        if($(checkbox).prop("checked")) {
            ret[$(checkbox).prop("id")] = true;
        }
    });
    return ret;
}

**編輯：**

如果您希望添加和刪除數組，則此JSFiddle（ http://jsfiddle.net/turiyag/pubGb/ ）可以解決問題。 請注意，在大多數情況下，尤其是在這種情況下，我使用prop（）而不是attr（），應使用prop（）獲得所需的值。

Answer 2

要使用自己的代碼，您需要了解事件的順序。 當您以編程方式調用復選框上的click（）時，將在更改每個子復選框的狀態（例如，添加屬性“已選中”）之前執行javascript（子代的checkMe（））。 正是由於這個原因，checkMe（）函數以相反的順序添加和刪除了所選數組中的ID。 您可以通過在checkMe函數中添加以下調試行來確認這一點：

console.log('Checked state of checkbox id:' + id + ' is: ' + checkbox.prop('checked'));

情況1：未選中時單擊checkAll； 它為每個子復選框都調用checkMe（），但發現“ checked”屬性為未定義。 因此它執行刪除代碼。 執行checkMe之后，將“ checked”屬性添加到復選框。

情況2：選中后，單擊checkAll； checkMe（）函數查找先前添加的“ checked”屬性並填充數組。 稍后可能會觸發一個事件以刪除“選中”屬性。

我更改了以下幾行以快速進行測試，並且似乎可以正常工作：

在更改事件上綁定checkMe，而不是單擊reload功能：

$('.table_checkbox').bind('change', checkMe);

選中.checkbox_all時，更改checkAll函數中未選中的子級的條件：

if($(this).prop('checked') === false) {/*call child click*/}
//Use prop instead of attr because it takes care of 'undefined' cases as well. If you want to keep using attr because you're on an older version of jquery then add something like:
typeof $(this).attr('checked') == 'undefined'

以及未選中.checkbox_all的條件：

if($(this).prop('checked') === true) {/*call child click*/}

希望這可以幫助。 這是一個可玩的jsbin 。