0

少し問題があり、修正方法がわかりません。すべてのチェックボックスを選択すると「すべて選択解除」と表示されますが、1つまたは2つ選択を解除すると、「すべて選択」を再度表示したい場合、問題は次のようになります。すべてのチェックボックスを選択し、手動で1つずつチェックを外し始めると、もう一度[すべて選択]をアクティブにする必要がありますが、[すべて選択]を押すと、すべてをチェックするのではなく、すべてをオフにします。

これは私のHTMLコードの一部です：

<input type="button" class="btn-primary btn-mini" id="check1" value="Check All" /> 
<input type="hidden" id="isChkd" value="true" />                                                                      
<input type="checkbox" name="" value="" class="cb1-element"> 751        
<input type="checkbox" name="" value="" class="cb1-element"> 752                                                                  
<input type="checkbox" name="" value="" class="cb1-element"> 753                                                                  
<input type="checkbox" name="" value="" class="cb1-element"> 754

私のJS：

$('#check1').toggle(function(){
    $('.cb1-element').attr('checked','checked');
    $(this).val('Uncheck All');
    $('#isChkd').val(true);
},function(){
    $('.cb1-element').removeAttr('checked');
    $(this).val('Check All');     
    $('#isChkd').val(false);
})

$('.cb1-element').change(function(){
    if($('#isChkd').val() == false){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val(false);
    }
});
4

7 に答える 7

1 
$('#check1').click(function(){
    if($('#isChkd').val() == 'true'){
        $('.cb1-element').attr('checked','checked');
        $(this).val('Uncheck All');
        $('#isChkd').val('false');
    }
    else{
        $('.cb1-element').removeAttr('checked');
        $(this).val('Check All');     
        $('#isChkd').val('true');
    }
});

$('.cb1-element').change(function(){
    var all = $('input.cb1-element').length;
    var checked = $('input.cb1-element:checked').length;
    if(all == checked){
        $('#check1').val('Uncheck All');
        $('#isChkd').val('false');
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val('true');
    }
});

ここでjsFiddleを動作させるhttp://jsfiddle.net/C9Tw2/18/

于 2013-02-19T20:56:32.630 に答える
0

考慮すべきいくつかの事柄：

checked1）プロパティを設定/クリアするには、.prop('checked', true)またはを使用します.prop('checked', false)。これは、jQueryでプロパティを処理するための新しくて優れた方法です。

2）非表示の入力を使用してチェックボックスを設定またはオフにする必要があるかどうかを追跡する代わりに、表示を切り替える（または実際に表示する）2つのボタンを使用できます。このように、チェックボックスの状態に基づいてボタンを特殊なケースにする必要はありません。

3）Toggleは状態変更ハンドラーではありません。要素の表示を切り替えるだけです。代わりに、コメント＃2と組み合わせて.on('click', function() {})、またはを使用して.click()ください。

4）ここには、実際には3つの状態があります。すべてオン、すべてオフ、その他の組み合わせです。3番目の状態をどうするかを決める必要があります。その場合は、「すべてチェック」と「すべてチェック解除」の両方を表示することもできます。

HTML：

<input type="button" class="btn-primary btn-mini" id="check1" value="Check All"/>
<input type="button" class="btn-primary btn-mini" id="uncheck1" value="Uncheck All"/>
<input type="checkbox" name="" value="" class="cb1-element">751
...

JS：

$('#check1').on('click', function () {
    $('.cb1-element').prop('checked', true);
    $('#check1, #uncheck1').toggle();
});

$('#uncheck1').on('click', function () {
    $('.cb1-element').prop('checked', false);
    $('#check1, #uncheck1').toggle();
});

$('.cb1-element').change(function () {
    var num = $('.cb1-element').length;

    if ($('.cb1-element:checked').length == num) {
        $('#check1').hide();
        $('#uncheck1').show();
    } else {
        $('#uncheck1').hide();
        $('#check1').show();
    }
});

デモ： http： //jsfiddle.net/jtbowden/tfwX9/

于 2013-02-19T20:50:34.253 に答える
0

Since you're using a hidden input tag as a flag, i would use that in your click function aswell

$('#check1').click(function(){
    if($('#isChkd').val() == "false"){
        $('.cb1-element').prop('checked', true);
        $(this).val('Uncheck All');
        $('#isChkd').val(true);
    } else if($('#isChkd').val() == "true"){
        $('.cb1-element').prop('checked', false);
        $(this).val('Check All');     
        $('#isChkd').val(false);
    }
});

This way you dont have the toggle function that has to be clicked in order for it to work.

I also added another if statement to your change function to detect when all 4 checkboxes are checked, it'll change it to "Uncheck All" and your flag to "true".

$('.cb1-element').change(function(){
    if($('#isChkd').val() == false){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);
    }else if($(':checked').length == 4){
        $('#check1').val('Uncheck All');
        $('#isChkd').val(true);    
    }else{
        $('#check1').val('Check All');
        $('#isChkd').val(false);
    }
});

You can see it working here in jsfiddle: http://jsfiddle.net/TWMAu/

于 2013-02-19T20:48:46.563 に答える
0

私$('#isChkd').val()は文字列を返すと思うので、== false常に比較は失敗します。

于 2013-02-19T20:33:27.520 に答える
0

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<button>Check All</button>

JS

$(':checkbox').click(function () {
    ex()
});
$('button').click(function () {
    ex(1)
});
var ex = function (btn) {
    if ($(':checkbox').length == $(':checkbox:checked').length) { //All are checked
        if (btn == 1) { //If button is clicked
            $(':checkbox').attr('checked', false);//Uncheck All
            $('button').html('Check All');
        } else { //If button is not clicked i.e. the last unselected checkbox was clicked
            $('button').html('Uncheck All');
        }
    } else if (btn == 1) { // BUtton is clicked
        $(':checkbox').attr('checked', true);//Check All
        $('button').html('Uncheck All');
    } else {
        $('button').html('Check All'); // Reset text to default
    }
}
于 2013-02-19T21:09:44.390 に答える