Question

大家好，我遇到了活动问题。我有一个复选框列表，我有一个主复选框，检查所有框。当我点击我的一些复选框列表项时，它应该将data-id attr添加到“selected 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（这是一个cheched或uncheched）...它只是点击所有复选框，如一个主复选框...它工作正常，但我有一个事件所有其他复选框，如果我点击它我添加一些数据到数组当我取消它时它从数组中删除数据....所以当我点击复选框时，他们正确地添加/删除数据到数组...但是当我点击主复选框时...它点击了右侧的复选框，但是当所有未选中时，数据数组都是空的，当所有未选中时都是空的...它必须是相反的方式

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（））在每个子复选框的状态更改之前执行（例如，添加属性'checked'）。正是由于这个原因，checkMe（）函数以相反的顺序添加和删除所选数组中的id。您可以通过在checkMe函数中添加以下调试行来确认这一点：

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

案例1：未选中时单击checkAll;它为每个子复选框调用checkMe（），但将'checked'属性视为未定义。所以它执行删除代码。执行checkMe后，复选框中会添加“已检查”属性。

案例2：检查时单击checkAll; checkMe（）函数找到先前添加的'checked'属性并填充数组。稍后可能会触发一个事件以删除“已检查”属性。

我更改了以下行以快速测试它并且似乎正在运行：

将checkMe绑定到更改事件而不是单击重新加载功能：

$('.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来玩..

带绑定事件的Jquery点击事件

2 个答案: