Question

我在创建一个复选框时遇到问题，该复选框能够检查并取消选中所有其他复选框。

复选框可以取消选中所有输入，但无法反向执行相同操作。

jsFiddle：http://jsfiddle.net/Vj6wY/1964/

HTML：

<div class='checkboxes'>
    All <input name="filterAll" type="checkbox"  checked="checked"  />
    Amazon <input name="filterAmazon" type="checkbox" checked="checked" />
    Abebooks <input name="filterAbebooks" type="checkbox" checked="checked" />
    Biblio <input name="filterBiblio" type="checkbox" checked="checked" />
    eBay <input name="filterEbay" type="checkbox" checked="checked" />        
</div>

jquery的：

$(document).ready(function(){    
    $('input').on("change",function(){
            var filter_id = $(this).attr("name");  

            if($(this).is(':checked')){         
                switch(filter_id){
                    case "filterAll":
                    $("input").attr({checked: true});
                    break;
                }
            }

            else{               
                switch(filter_id){
                    case "filterAll":   
                    $("input").attr({checked: false});
                    break;                  
                }
            }
        });
})

Answer 1

http://jsfiddle.net/Vj6wY/1965/

您现在应该使用.prop('checked', true);代替.attr()

http://api.jquery.com/prop/

$(document).ready(function(){    
    $('input').on("change",function(){
            var filter_id = $(this).attr("name");  

            if($(this).is(':checked')){     
                            alert("asdas");

                switch(filter_id){
                    case "filterAll":
                    $("input").prop('checked', true);
                    break;
                }
            }

            else{               
                switch(filter_id){
                    case "filterAll":   
                    $("input").prop('checked', false);
                    break;                  
                }
            }
        });
});

Answer 2

$('input#filterAll').change(function()
{
    $('input:checkbox').prop('checked', this.checked);
})

http://jsfiddle.net/Vj6wY/1968/

您的javascript数量可以大幅减少。请注意，我已在全部选中复选框中添加了ID。

Answer 3

试试这个

$(document).ready(function(){    
    $('input').on("change",function(){
            var filter_id = $(this).attr("name");  

            if($(this).is(':checked')){         
                switch(filter_id){
                    case "filterAll":
                    $("input").attr('checked' , 'checked'});
                    break;
                }
            }

            else{               
                switch(filter_id){
                    case "filterAll":   
                    $("input").removeArrt('checked');
                    break;                  
                }
            }
        });
})

取消全部检查后检查所有输入

3 个答案: