webentwicklung-frage-antwort-db.com.de

jQuery. So deaktivieren Sie alle Kontrollkästchen außer einem (das aktiviert wurde)

Ich habe 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 möchte ich als nächstes: Wenn ich auf ein Kontrollkästchen klicke, sollte das Kontrollkästchen aktiviert und andere Kontrollkästchen deaktiviert sein. Wie kann ich es tun?

15
Andrew

Sie können die Schaltfläche radio verwenden und sie nach Namensattributen gruppieren. Wenn Sie es mit checkboxes tun müssen, können Sie es auf diese Weise tun,

Live Demo

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

Für dynamisch generiertes HTML benötigen Sie on , mit dem Sie das Ereignis mit einem statischen übergeordneten Element delegieren können. Sie können ein Dokument verwenden, das Sie nicht kennen.

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

Dokument kann durch statisches übergeordnetes Element ersetzt werden, wenn dies bekannt ist. z.B. Wenn der dynamisch generierte div-Inhalt die ID parentdiv hat, können Sie haben

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

Bearbeiten

Verwenden Sie prop anstelle von attrfür Eigenschaften checked, selected oder disabled gemäß Dokumentation.

Ab jQuery 1.6 gibt die .attr () -Methode für Attribute, die nicht festgelegt wurden, undefiniert zurück. Verwenden Sie die .prop () -Methode, um DOM-Eigenschaften wie den aktivierten, ausgewählten oder deaktivierten Status von Formularelementen abzurufen und zu ändern.

27
Adil

Eine andere Lösung

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

Vielleicht hilft Ihnen das:

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

aktiviert alle Kontrollkästchen mit Ausnahme des angeklickten.

$("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>
1
Beefjeff

jQuery V: 1.6 = <

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