0

大家好，我在使用事件时遇到问题。我有一个复选框列表，我有一个选中所有框的主复选框。当我 clickEvent 我的一些复选框列表项时，它应该将 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 cheched 或 uncheched）......它只是像主复选框一样单击所有复选框......它工作正常，但我有一个事件所有其他复选框如果我单击 em，我会在取消单击 em 时将一些数据添加到数组中，它会从数组中删除数据....所以当我单独单击复选框时，它们会正确地将数据添加/删除到数组中...但是当我单击主复选框时...它点击右边的复选框，但数据数组在全部选中时为空，当全部未选中时为满......它必须是相反的方式

4

2 回答 2

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() 来获取你想要的值。

于 2013-02-11T07:39:01.783 回答
0

要使用您自己的代码，您需要了解事件的顺序。当您以编程方式在复选框上调用 click() 时，javascript（用于子项的 checkMe()）在每个子复选框的状态发生更改（例如，添加属性“已选中”）之前执行。正是由于这个原因，checkMe() 函数以相反的顺序在所选数组中添加和删除 id。您可以通过在 checkMe 函数中添加以下调试行来确认这一点：

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

案例1：未选中时点击checkAll；它为每个子复选框调用 checkMe()，但发现“已检查”属性未定义。所以它执行删除代码。执行 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 ..

于 2013-02-11T10:04:02.963 回答