jQuery immer hat ein Kontrollkästchen aktiviert

Question

Mit dem folgenden HTML-Checkbox Code

<input type="checkbox" class="example" checked />2016 
<input type="checkbox" class="example" />2015 
<input type="checkbox" class="example" />2014 
<input type="checkbox" class="example" />2013 
<input type="checkbox" class="example" />2012 
<input type="checkbox" class="example" />2011 
<input type="checkbox" class="example" />2010 

Welche Änderungen muss ich

$(function() { 
    $('input[type="checkbox"]').bind('click',function() { 
     $('input[type="checkbox"]').not(this).prop("checked", false); 
    }); 
}); 

so auf die folgende jQuery machen, dass eine der Kontrollkästchen aktiviert ist überhaupt mal keine leeren Checkboxen zulassen?

Answer 1

Scheint so, als hätten Sie schöne UI-Komponenten mit Checkboxen, deshalb wollen Sie keine Radio-Eingänge benutzen?

über Ihre Frage: Ihr Code funktioniert wie gewünscht

$(function() { 
 
    $('input[type="checkbox"]').bind('click',function() { 
 
     $(this) 
 
      .parent() 
 
      .find('[type="checkbox"]').not(this) 
 
      .removeAttr('checked'); 
 
    }); 
 
});

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

 
<input type="checkbox" class="example" checked />2016 
 
<input type="checkbox" class="example" />2015 
 
<input type="checkbox" class="example" />2014 
 
<input type="checkbox" class="example" />2013 
 
<input type="checkbox" class="example" />2012 
 
<input type="checkbox" class="example" />2011 
 
<input type="checkbox" class="example" />2010

Answer 2

Scheint, wie Sie nicht Radio-Button wollten stattdessen verwenden. Dies ist aktualisierter Code von Ihnen, es funktioniert wie gewünscht. Sie müssen sicherstellen, dass ein Kontrollkästchen nicht durch erneutes Klicken deaktiviert wird.

$(function() { 
 
    $('input[type="checkbox"]').bind('click',function() { 
 
     if($(this).prop('checked') === false) { 
 
      $(this).prop('checked', true); 
 
     } 
 
     $('input[type="checkbox"]').not(this).prop("checked", false); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<input type="checkbox" class="example" checked />2016 
 
<input type="checkbox" class="example" />2015 
 
<input type="checkbox" class="example" />2014 
 
<input type="checkbox" class="example" />2013 
 
<input type="checkbox" class="example" />2012 
 
<input type="checkbox" class="example" />2011 
 
<input type="checkbox" class="example" />2010

Answer 3

Es ist noch eine weitere (kürzere) Weg, um das gleiche zu erreichen:

$(function() { 
    $(':checkbox').click(function(){ 
     $(this).prop('checked', true).siblings(':checkbox').prop("checked", false); 
    }); 
}); 

Es wird einfach immer das geklickt Element halten geprüft und alle ungehemmt Geschwister.