Checking boxes and unchecking boxes with certain events

问题

I have a list of manufacturers. I want to allow the ability for multiple selection. There is a list of all the makes, and in addition an ALL button (implying all makes selected).

The Algorithm:

When someone clicks on ALL, all the makes checkboxes need to uncheck, and the ALL buttons needs to de-activate.
When the ALL button is selected, and someone clicks on a make, the ALL button is unselected and activated.
When someone de-selects all the makes buttons, then the ALL button becomes selected again, and de-activated.

To add extra complexity, the checkboxes are done in a custom css Jquery Buttonset.

HTML

<div class="header_make_column"><input type="checkbox" name="makes[]" value="all" class="new_filter_button new_manufacturer_button" id="new_all" /><label for="new_all">ALL MAKES</label><input type="checkbox" name="makes[]" value="200002038" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Acura"/><label for="new_makes_Acura">Acura</label><input type="checkbox" name="makes[]" value="200001769" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Aston Martin" /><label for="new_makes_Aston Martin">Aston Martin</label><input type="checkbox" name="makes[]" value="200000001" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Audi"/><label for="new_makes_Audi">Audi</label><input type="checkbox" name="makes[]" value="200005848" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Bentley"/><label for="new_makes_Bentley">Bentley</label><input type="checkbox" name="makes[]" value="200000081" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_BMW"/><label for="new_makes_BMW">BMW</label><input type="checkbox" name="makes[]" value="200006659" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Buick"/><label for="new_makes_Buick">Buick</label><input type="checkbox" name="makes[]" value="200001663" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Cadillac"/><label for="new_makes_Cadillac">Cadillac</label></div><div class="header_make_column"><input type="checkbox" name="makes[]" value="200000404" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Chevrolet"/><label for="new_makes_Chevrolet">Chevrolet</label><input type="checkbox" name="makes[]" value="200003644" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Chrysler"/><label for="new_makes_Chrysler">Chrysler</label><input type="checkbox" name="makes[]" value="200009788" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Dodge"/><label for="new_makes_Dodge">Dodge</label><input type="checkbox" name="makes[]" value="200033022" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_FIAT"/><label for="new_makes_FIAT">FIAT</label><input type="checkbox" name="makes[]" value="200005143" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Ford"/><label for="new_makes_Ford">Ford</label><input type="checkbox" name="makes[]" value="200007302" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_GMC"/><label for="new_makes_GMC">GMC</label><input type="checkbox" name="makes[]" value="200001444" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Honda"/><label for="new_makes_Honda">Honda</label><input type="checkbox" name="makes[]" value="200001398" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Hyundai"/><label for="new_makes_Hyundai">Hyundai</label></div><div class="header_make_column"><input type="checkbox" name="makes[]" value="200000089" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Infiniti"/><label for="new_makes_Infiniti">Infiniti</label><input type="checkbox" name="makes[]" value="200003196" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Jaguar"/><label for="new_makes_Jaguar">Jaguar</label><input type="checkbox" name="makes[]" value="200001510" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Jeep"/><label for="new_makes_Jeep">Jeep</label><input type="checkbox" name="makes[]" value="200003063" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Kia"/><label for="new_makes_Kia">Kia</label><input type="checkbox" name="makes[]" value="200006582" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Land Rover"/><label for="new_makes_Land Rover">Land Rover</label><input type="checkbox" name="makes[]" value="200001623" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Lexus"/><label for="new_makes_Lexus">Lexus</label><input type="checkbox" name="makes[]" value="200001777" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Lincoln"/><label for="new_makes_Lincoln">Lincoln</label><input type="checkbox" name="makes[]" value="200028029" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Maserati"/><label for="new_makes_Maserati">Maserati</label></div><div class="header_make_column"><input type="checkbox" name="makes[]" value="200004100" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Mazda"/><label for="new_makes_Mazda">Mazda</label><input type="checkbox" name="makes[]" value="200000130" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Mercedes-Benz"/><label for="new_makes_Mercedes-Benz">Mercedes-Benz</label><input type="checkbox" name="makes[]" value="200002305" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_MINI"/><label for="new_makes_MINI">MINI</label><input type="checkbox" name="makes[]" value="200002915" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Mitsubishi"/><label for="new_makes_Mitsubishi">Mitsubishi</label><input type="checkbox" name="makes[]" value="200000201" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Nissan"/><label for="new_makes_Nissan">Nissan</label><input type="checkbox" name="makes[]" value="200000886" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Porsche"/><label for="new_makes_Porsche">Porsche</label><input type="checkbox" name="makes[]" value="200393150" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Ram"/><label for="new_makes_Ram">Ram</label><input type="checkbox" name="makes[]" value="200006515" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Scion"/><label for="new_makes_Scion">Scion</label></div><div class="header_make_column"><input type="checkbox" name="makes[]" value="200038885" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_smart"/><label for="new_makes_smart">smart</label><input type="checkbox" name="makes[]" value="200004491" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Subaru"/><label for="new_makes_Subaru">Subaru</label><input type="checkbox" name="makes[]" value="200003381" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Toyota"/><label for="new_makes_Toyota">Toyota</label><input type="checkbox" name="makes[]" value="200000238" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Volkswagen"/><label for="new_makes_Volkswagen">Volkswagen</label><input type="checkbox" name="makes[]" value="200010382" class="new_filter_button new_manufacturer_button chkmakes" id="new_makes_Volvo"/><label for="new_makes_Volvo">Volvo</label></div><div class="clr"></div>

JQUERY

// the makes buttons
$('.chkmakes').click(function(){
    no_checked = $(".chkmakes:checked").length;
    if(no_checked==0) { // if not makes are checked
        $('#new_all + label').addClass('ui-state-active');
        $('#new_all').prop('checked', true);
        //$('#new_all').attr('disabled', true);
    } else {
        $('#new_all + label').removeClass('ui-state-active');
        $('#new_all').removeProp('checked');
        $('#new_all').attr('disabled', false);      
    }
});
// all makes button
$('#new_all').click(function(){
    $('.chkmakes').each(function(){
        $('.chkmakes').removeProp('checked');
        $('.chkmakes' + label).removeClass('ui-state-active');
    });
});

Here is a working version of what I have done so far: http://jsfiddle.net/mCM6S/

It just isn't working right. If you uncheck all the makes, then ALL makes does select, but its not de-activated. If you click on another make, it doesn't uncheck ALL makes either. I think possibly the each() loop function is not right, but that may only be a part of it.

UPDATE

Still struggling with the ALL button being de-activated and activated. Any ideas?

回答1:

Change all your calls of

prop('checked', true);

attr('checked', true);

update fiddle

Additional notes: For uniform changes such as changing an attribute on a general selector, there is no need for each. So you can change

$('.chkmakes').each(function(){
        $('.chkmakes').removeProp('checked');
        $('.chkmakes' + label).removeClass('ui-state-active');
    });
});

$('.chkmakes').attr('checked', false);
$('.chkmakes + label').removeClass('ui-state-active');

Also, your selector in the each

$('.chkmakes' + label) needs to be change to

$('.chkmakes + label')

回答2:

Try using .prop('checked', true) and .prop('checked', false) instead. I also cleaned up some code. For example, if you are using .each() you can use this to refer to the element that the each() is on.

// the makes buttons
$('.chkmakes').click(function(){
    no_checked = $(".chkmakes:checked").length;
    var total = $(".chkmakes").length;
    if(no_checked==total) { // if all makes are checked
        $('#new_all').addClass('ui-state-active');
        $('#new_all').prop('checked', true);
    } else {
        $('#new_all').removeClass('ui-state-active');
        $('#new_all').prop('checked', false);       
    }
});
// all makes button
$('#new_all').click(function(){
    if($(this).is(":checked"))
    {
        $('.chkmakes').each(function(){
            $(this).prop('checked', true);
            $(this).addClass('ui-state-active');
        });
    }
    else
    {
        $('.chkmakes').each(function(){
            $(this).prop('checked', false);
            $(this).removeClass('ui-state-active');
        });
    }
});

JSFiddle

回答3:

You have $('.chkmakes' + label), it should be $('.chkmakes + label')

That should fix your each issue.

来源：https://stackoverflow.com/questions/24747266/checking-boxes-and-unchecking-boxes-with-certain-events

标签

jquery

jquery-ui

checkbox