0

こんにちはみんな私はイベントで問題を抱えています。チェックボックスリストがあり、すべてのボックスをチェックするメインチェックボックスがあります。チェックボックスリスト項目のいくつかを[イベント]をクリックすると、「選択されたオブジェクト」にdata-idattrが追加されます。したがって、私の場合、メインのチェックボックスを押して他のすべてをチェックすると、すべてがOKになります（他のすべての要素をクリックするだけです）。しかし、そうすると、配列が空になります。チェックを外すと、本来の方法になりますが、チェックされます（チェックを外すと、空になります）。

......    
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（チェックボックスまたはチェックボックスなし）をクリックする必要があることです...メインチェックボックスのようにすべてのチェックボックスをクリックするだけです...正常に動作しますが、他のすべてのチェックボックスにイベントがあります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/）でうまくいきます。私はattr（）の代わりにprop（）を使用していることに注意してください。ほとんどの場合、特にこれでは、prop（）を使用して必要な値を取得する必要があります。

于 2013-02-11T07:39:01.783 に答える
0

独自のコードを使用するには、イベントの順序を理解する必要があります。チェックボックスでclick（）をプログラムで呼び出すと、各子チェックボックスの状態が変更される（たとえば、属性'checked'を追加する）前に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をバインドします。

$('.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 に答える