jQuery. Wie deaktivieren Sie alle Kontrollkästchen bis auf eines (was wurde geprüft)

Habe ich html-Elemente, 4 Beispiel:

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

Und jetzt will ich weiter: Wenn ich auf jede checkbox die checkbox sollte aktiviert sein und die anderen Checkboxen sollten deaktiviert sein. Wie kann ich es tun?

Was Sie wollen, ist aufgerufen, ein radio-button...
Wahl, kein problem! Ich habe nicht darüber zu wissen.

InformationsquelleAutor Andrew | 2012-12-06

26

Können Sie radio - Taste und gruppieren Sie Sie durch die name-Attribute. Wenn Sie es zu tun haben mit checkboxes dann können Sie es auf diese Weise,

Live-Demo
```
$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});
```
Für dynamisch generierte html, die Sie benötigen auf , delegieren Sie die Veranstaltung mit statischen Eltern, können Sie Dokument mit Sie nicht wissen, statische parent.
```
$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});
```
Dokument ersetzt werden könnte durch statische parent, wenn es bekannt ist. wenn z.B. div enthalten, die dynamisch erzeugt wurde, hat id parentdiv dann können Sie
```
`$('#parentdiv').on('click','.foo', function(){`
```
Bearbeiten

Verwenden prop statt attr für Eigenschaften checked, selected oder disabled als pro-Dokumentation.

Als von jQuery 1.6, die .attr () - Methode gibt undefined Attribute
noch nicht festgelegt wurde. Zum abrufen und ändern von DOM-Eigenschaften wie
die überprüft, ausgewählt, oder deaktivierten Zustand von form-Elementen, verwenden Sie die
.prop() Methode.

Vielen Dank für die Antwort. Ich weiß, über radiobutton Gruppe. Aber ich kann es nicht benutzen, weil ich muss verschiedene Namen params für meine Spring MVC controller. Der Grund habe ich beschlossen, mit checkbox und JavaScript
+1: für die Arbeit der Lösung und DEMO. Im Allgemeinen ist eine 1-liner alternative wäre: $('.foo').not(this).attr('checked', false);
Danke @FrançoisWahl, ist Die vorgeschlagene Erklärung ist sehr schön.
Wahl vielen Dank sehr viel!!! 🙂
Jungs, es funktioniert nicht, wenn html dynamisch generiert, indem jQuey! 🙁 Was soll ich tun in der situation?

InformationsquelleAutor Adil

Andere Lösung

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

diese Antwort ist sehr unterschätzt

InformationsquelleAutor Joyal

jQuery-V: 1.6 =<

$( ".foo" ).change(function() {
    $('.foo').not(this).prop('checked', false);
});

InformationsquelleAutor Sadee

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.