jQuery. Come deselezionare tutte le caselle, tranne uno (che è stata selezionata)

ho elementi HTML, 4 esempio:jQuery. Come deselezionare tutte le caselle, tranne uno (che è stata selezionata)

<div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
    <div><input type="checkbox" class="foo"> Checkbox</div> 
</div>

E ora, voglio prossimo: se clicco su qualsiasi casella di controllo - la casella di controllo deve essere controllato e altro le caselle di controllo dovrebbero essere deselezionate. Come posso farlo?

fonte

2012-12-06 Andrew

quello che vuoi è chiamato un pulsante di scelta ... – RRikesh

@ François Wahl, nessun problema! Non lo sapevo. – Andrew

È possibile utilizzare il pulsante radio e raggrupparli per attributi del nome. Se avete a che fare con checkboxes allora si può fare in questo modo,

Live Demo

$('.foo').click(function(){  
     $('.foo').attr('checked', false); 
     $(this).attr('checked', true);   
});

Per dinamicamente HTML generato è necessario on che consente di delegare l'evento con genitore statico, è possibile usa un documento con te non sai genitore statico.

Documento potrebbe essere sostituito da padre statico se è noto. per esempio. se div contengono dinamicamente generato ha id parentdiv allora si può avere

`$('#parentdiv').on('click','.foo', function(){`

Modifica

Uso prop invece di attr per le proprietà checked, selected, o disabled come da documentazione.

A partire da jQuery 1.6, il metodo .attr() restituisce undefined per gli attributi che non sono stati impostati. Per recuperare e modificare proprietà DOM come lo stato selezionato, selezionato o disabilitato degli elementi del modulo, utilizzare il metodo .prop().

fonte

2012-12-06 07:50:48 Adil

Grazie mille per la risposta. Conosco il gruppo 'radiobutton'. Ma non posso usarlo, perché devo avere parametri diversi per il mio controller Spring MVC. Per questo motivo, ho deciso di utilizzare la casella di controllo e JavaScript – Andrew

+21

+1: per la soluzione di lavoro e DEMO. In generale, un'alternativa 1-liner sarebbe: '$ ('. Foo'). Not (this) .attr ('checked', false);' – Nope

Grazie @ FrançoisWahl, la frase suggerita è molto carina. – Adil

Ecco un po 'mi è capitato di essere al lavoro su:

.siblings("input[type='checkbox']").attr("checked", true);

selezionerà tutte le caselle di controllo ad eccezione di quello che è stato fatto clic.

$("input[type=checkbox]").on("click", function() { 
 

 
    if ($(this).val() == "none") { 
 
    
 
    $(this).siblings("input[type=checkbox]").attr('checked', false); 
 
    
 
    } else { 
 
    
 
    $(this).siblings("input[value=none]").attr('checked', false); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br> 
 
    <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br> 
 
    <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br> 
 
    <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br> 
 
    <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br> 
 

 
    <input type="checkbox" id="worker-soft-none" value="none"> 
 
    <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br> 
 
</div>

fonte

2017-03-14 22:34:58 Beefjeff

jQuery. Come deselezionare tutte le caselle, tranne uno (che è stata selezionata)

risposta

Problemi correlati