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

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