Question

我有一份制造商名单。我想允许多种选择的能力。有一个所有品牌的列表，另外还有一个ALL按钮（暗示所有品牌都被选中）。

算法：

当有人点击ALL时，所有制作复选框都需要取消选中，所有按钮都需要取消激活。
当选择了ALL按钮，并且有人点击了make时，ALL按钮被取消选中并激活。
当有人取消选择所有制作按钮时，再次选择ALL按钮并取消激活。

为了增加额外的复杂性，复选框在自定义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/

它无法正常工作。如果您取消选中所有品牌，那么ALL品牌会选择，但不会取消激活。如果您单击另一个make，则不会取消选中ALL make。我想可能每个（）循环函数都不正确，但这可能只是它的一部分。

更新

仍在努力取消激活和激活ALL按钮。有什么想法吗？

Answer 1

更改

的所有电话

prop('checked', true);

到

attr('checked', true);

update fiddle

附加说明：对于统一更改（例如更改常规选择器上的属性），不需要每个更改。所以你可以改变

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

到

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

另外，你的选择器在每个

中

$('.chkmakes' + label) 需要改为

$('.chkmakes + label')

Answer 2

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

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

Answer 3

您有$('.chkmakes' + label)，应该是$('.chkmakes + label')

这应该可以解决你的每个问题。

选中复选框并取消选中某些事件

3 个答案: