选中复选框和取消选中带有某些事件的复选框 [英] 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).

算法:

• 当某人单击全部"时，需要取消选中所有制造"复选框，并且需要停用全部"按钮.
• 选择全部"按钮后，如果有人点击某个品牌，则会取消选择并激活全部"按钮.
• 当某人取消选择所有制造按钮时，则再次选择全部"按钮并取消激活.

要增加额外的复杂性，请在自定义css Jquery Buttonset中完成复选框.

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

以下是我到目前为止所做的工作版本: http://jsfiddle.net/mCM6S/

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

它无法正常工作.如果取消选中所有品牌，则所有品牌都会选择，但未取消激活.如果您点击其他品牌，则不会取消选中所有品牌.我认为可能each()循环函数不正确，但这可能只是其中的一部分.

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.

更新

仍在为禁用和激活全部"按钮而苦苦挣扎.有什么想法吗?

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

推荐答案

尝试改用.prop('checked', true)和.prop('checked', false).我还清理了一些代码.例如，如果您使用的是.each()，则可以使用this来引用each()所在的元素.

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

这篇关于选中复选框和取消选中带有某些事件的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！