jQuery onay kutularını işaretleyip işaretini kaldırmak için yalnızca bir kez yangın yapar

Question

jQuery'm için çok basit bir gereksinime sahibim: bir radyo düğmesi işaretliyse bir kutu kümesini kontrol etmek ve diğeri kontrol edilirse hepsini silmek için.

JQuery çalışır, ancak yalnızca bir kez çalışır - yani hepsini (tüm kutuları denetle) tıklatıp tıklatıp temizlediğimi (tüm kutuları temizle) tıklatıp sonra da hepsini denetlemek için tıklatırsınız. etkisi yoktur. Benzer şekilde, bazı kutuları el ile işaretlemeyin ve sonra yeniden seçmek için tıklatın, hiçbir etkisi yoktur.

jQuery

$('#all').on('change', function() { 
    if (!$(this).is(':checked')) { 
     $('.country').attr('checked', false); 
    } else { 
     $('.country').attr('checked', true); 
    } 
}); 


$('#none').on('change', function() { 
    if (!$(this).is(':checked')) { 
     $('.country').attr('checked', true);  
    } else { 
     $('.country').attr('checked', false); 
    } 
}); 

HTML

<div class="subselect"> 
    <input type="radio" class="TLO" name="radio1" id="all" />Check All 
<br /> 
     <input type="radio" class="TLO" name="radio1" id="none" />Clear All 
     <br /> 
    </div> 

    <br /> 
    <br /> 
    <div class="cselect" id="countries"> 
     <input type="checkbox" class="country" />1 
     <br /> 
     <input type="checkbox" class="country" />2 
     <br /> 
     <input type="checkbox" class="country" />3 
    </div> 

jsFiddle http://jsfiddle.net/vsGtF/1/

Answer 1

senin .attr()değiştirin.

: .attr() devlet için docs gibi

$('#all').on('change', function() { 
    $('.country').prop('checked', $(this).is(':checked')); 
}); 
$('#none').on('change', function() { 
    $('.country').prop('checked', !$(this).is(':checked')); 
}); 

jsFiddle example

:

$('#all').on('change', function() { 
    if (!$(this).is(':checked')) { 
     $('.country').prop('checked', false); 
    } else { 
     $('.country').prop('checked', true); 
    } 
});  
$('#none').on('change', function() { 
    if (!$(this).is(':checked')) { 
     $('.country').prop('checked', true);  
    } else { 
     $('.country').prop('checked', false); 
    } 
}); 

jsFiddle example

Ayrıca bu sadece azaltabilecek

jQuery 1.6'dan itibaren .attr() yöntemi, ayarlanmamış öznitelikleri için undefined değerini döndürür. gibi DOM özelliklerini, form öğelerinin işaretli, seçili veya devre dışı durumunu geri almak ve değiştirmek için, .prop() yöntemini kullanın.

Answer 2

Bu burada çok üzerinde aldatıldığını edildiğini biliyoruz ama bir şey özledim, yani vardı:

id = $(this).attr('id'); 
if($('#checkbox_' + id).prop('checked')){ 
    $('#checkbox_' + id).attr('checked', false); 
} else { 
    $('#checkbox_' + id).attr('checked', true); 
} 

Ve yukarıda pervane takas özn ihtiyacının TÜM vakası (belirtildiği gibi)

birini yardımcı olur

if($('#checkbox_' + id).prop('checked')){ 
    $('#checkbox_' + id).prop('checked', false); 
} else { 
    $('#checkbox_' + id).prop('checked', true); 
} 

Umut ...