CODEWITHSUNDEEP
jquerycheckbox
paoloi
paoloi

Reputation: 189

check all/ uncheck all checkboxes js

I have a little problem and i don't really how to fix it, If I have all the checkboxes selected it will appear "deselect all" but if i deselect one or two i want my "select all" appear again, my issue is that if I select every checkbox and i start manually unchecking one by one it suppose to activate select all again, but if I press select all it will uncheck everything instead of check all.

This is part of my HTML code:

<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

My 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);
    }
});

Upvotes: 0

Views: 4521

Answers (7)

user546305
user546305

Reputation:

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
    }
}

Upvotes: 0

Pragnesh Rupapara
Pragnesh Rupapara

Reputation: 802

to check all check boxes

$("input:checkbox").attr("checked", true);

to un-check all check boxes

$("input:checkbox").attr("checked", false);

to check all check boxes using class

$(".class_name:checkbox").attr("checked", true);

to un-check all check boxes using class

$(".class_name:checkbox").attr("checked", false);

Upvotes: 0

Kautil
Kautil

Reputation: 1331

try this,

<input type="checkbox" id="check1" onclick="$('input[type=checkbox][class=cb1-element]').attr('checked',this.checked)">

Upvotes: 0

Pedro Estrada
Pedro Estrada

Reputation: 2419

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/

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

A few things to consider:

1) To set/clear the checked property, use .prop('checked', true) or .prop('checked', false). It is the newer and better way to handle properties in jQuery.

2) Instead of using a hidden input to track whether your checkboxes need to be set or cleared, you could instead have 2 buttons which toggle visibility (or display really). This way, you don't have to special case the button based on checkbox state.

3) Toggle is not a state change handler. It simply toggles visibility of an element. Instead, combined with comment #2, use .on('click', function() {}), or just .click().

4) You really have 3 states here: All on, all off, some other combination. You need to decide what to do with the third state. You could even show both "Check All" and "Uncheck All" in that case.

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();
    }
});

Demo: http://jsfiddle.net/jtbowden/tfwX9/

Upvotes: 0

gregjer
gregjer

Reputation: 2843

$('#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');
    }
});

working jsFiddle here http://jsfiddle.net/C9Tw2/18/

Upvotes: 1

searlea
searlea

Reputation: 8388

I think $('#isChkd').val() is returning a String, so the comparison to == false always fails.

Upvotes: 0

Related Questions