How to uncheck and refresh data with checkbox jQuery

Question

I have 4 buttons in this code. When selecting the "all" button, I would like the other 3 buttons to uncheck and refresh. Here is what I have:

$('div.regions').find('input:checked').each(function () {
    var id = this.id;
    var now = moment();
    if (id == "ALL")
    {
        if (item.Date >= now){ data.push(item); }

    }
    else if (id == item.Region)
    {
        if (item.Date >= now){ data.push(item); }
    }
});

Here is a jsfiddle of the code: http://jsfiddle.net/ZHvYH/ Can anyone help?

What do you mean with refresh? And where is your attempt to uncheck? — putvande
– putvande, Commented Nov 21, 2013 at 23:30
By refresh I mean return the button UI to its unchecked state. I've tried $( '#SCV' ).prop( "checked", false ).checkboxradio( "refresh" ); and $('.SCV').prop('checked', false); with no success. — Bacon2305
– Bacon2305, Commented Nov 21, 2013 at 23:41

NaNpx · Accepted Answer · 2013-11-21 23:51:38Z

3

Updated the JSFiddle - http://jsfiddle.net/ZHvYH/5/

var checkboxes = $('div.regions input[type="checkbox"]:not([id="ALL"])');

$('div.regions input[type="checkbox"]').on({
    'change': function(){
        var checkbox = $(this);

        if(checkbox.attr('id') == 'ALL'){
            checkboxes.prop('checked',checkbox.prop('checked')).checkboxradio('refresh');
        }
        else {
            $('#ALL').prop('checked',(checkboxes.length == $('div.regions input[type="checkbox"]:checked:not([id="ALL"])').length)).checkboxradio('refresh');
        }
    }
});

answered Nov 21, 2013 at 23:51

NaNpx

5303 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

crenckly Over a year ago

This solution will ensure that when every option is "checked" the ALL option will automatically be checked as well. +1

Bacon2305 Over a year ago

If I want to uncheck the all category once another button has been selected, how do I code that?

NaNpx Over a year ago

@Bacon2305 You could just do $('#ALL').prop('checked',false).checkboxradio('refresh');

MattDiamant · Accepted Answer · 2013-11-22 00:05:43Z

1

When you check #ALL, remove the checked attribute from all the other checkboxes, and then refresh them.

var checkboxes = $('div.regions input[type="checkbox"]:not([id="ALL"])');

$('#ALL').on({
    'click': function(){
        if (this.checked) {
            checkboxes.removeAttr('checked').checkboxradio("refresh");
        }
    }
});

http://jsfiddle.net/ZHvYH/6/

answered Nov 22, 2013 at 0:05

MattDiamant

8,8394 gold badges39 silver badges47 bronze badges

3 Comments

crenckly Over a year ago

ummmm I don't think your fiddle works(I'm using chrome). And You do not account for unchecking them if the all is pressed again. jsfiddle.net/ZHvYH/12

MattDiamant Over a year ago

When the ALL checkbox is selected, the others deselect. That's literally all the question asks for.

Bacon2305 Over a year ago

Thank you! Works very well! Now if I want to uncheck the "all" button once different button is selected, how would this been done? Thanks!

Black.Jack · Accepted Answer · 2013-11-21 23:33:31Z

0

 if (id == "ALL")
    {
        if (item.Date >= now){ data.push(item); }
    $('input[type=checkbox]').each(function () {
         this.checked ? this.attr('checked', false) : null   ;
    });

    }

Maybe you need a bit of tweaking..i don't tested, i write down as i imagined.

hope this helps..

answered Nov 21, 2013 at 23:33

Black.Jack

1,9572 gold badges25 silver badges42 bronze badges

1 Comment

Bacon2305 Over a year ago

Thank you for the response. Unfortunately it didn't work in the jsfiddle.

Collectives™ on Stack Overflow

How to uncheck and refresh data with checkbox jQuery

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related