jQuery und Checkboxen

Von in javascript, jquery

Check­bo­xen ver­lei­ten dazu, die Funk­ti­on .val() zum Set­zen des “Aus­wahl­kas­tens” zu ver­wen­den. Bei z.B. Text­fel­dern oder Pull­downs ist dies die rich­ti­ge Vor­ge­hens­wei­se, bei Check­bo­xen muss statt­des­sen eine Eigen­schaft (pro­per­ty) gesetzt wer­den. Selt­sa­mer­wei­se fin­det man im Inter­net dies­be­züg­lich kei­ne ein­heit­li­che Anlei­tung, man­che Bei­spie­le sind sogar funk­ti­ons­un­tüch­tig. Ich möch­te hier anhand eines Code-​Beispiels zei­gen, wie man Check­bo­xen rich­tig beein­flusst.

Check­bo­xen müs­sen auf die Eigen­schaft “che­cked” abge­fragt wer­den. Der Rück­ga­be­wert ist dabei “true”, wenn das Häk­chen gesetzt ist, oder “fal­se”, wenn nicht. In fol­gen­der Demo kann die Check­box über einen But­ton akti­viert oder deak­ti­viert wer­den (dabei wird das For­mu­lar nicht abge­sen­det).

Für die­ses Bei­spiel benö­ti­gen wir zuerst ein pri­mi­ti­ves For­mu­lar: eine Check­box und einen But­ton:

<form action="" method="post">

    <input id="checkbox" type="checkbox" title="checkbox" name="checkbox" />
    <input id="toggle_button" type="button" value="Drück mich mehrmals!" />

</form>

Der JavaScript-​Code könn­te z.B. so aus­se­hen:

$(document).ready(function(){
   
   $('#toggle_button').click(function(){

      if ($('#checkbox').is(':checked')) {
          
          $('#checkbox').prop("checked",false);
          
      } else {
          
          $('#checkbox').prop("checked",true);
          
      }
      
   });
   
});

Dabei fal­len meh­re­re Din­ge auf.

  • Der Sta­tus der Check­box wird nicht über den Value, son­dern über ihre Eigen­schaft “che­cked” abge­fragt.
  • Dabei wird ein boole­scher Wert retour­niert, true oder fal­se.
  • Die Check­box lässt sich nicht mit einem boole­schen Wert und nicht mit der Funk­ti­on val() steu­ern.
  • Zum Steu­ern der Check­box muss die Eigen­schaft “che­cked” beein­flusst wer­den.

Klingt eigent­lich ganz logisch, vor allem, wenn man den Quell­text einer über html vor-selek­tier­ten Check­box betrach­tet:

<input id="checkbox" ... checked="checked" />

Wohl­ge­merkt, in mei­nem obi­gen Bei­spiel wird der But­ton dazu ver­wen­det, die Check­box zu steu­ern. Und nicht, um das For­mu­lar abzu­sen­den (!). Und genau das ist der Unter­schied bei einer Check­box. “value” hält den Wert, der beim Absen­den über­tra­gen wird. Die Eigen­schaft “che­cked” ent­schei­det, ob der Wert mit­ge­sen­det wird (true oder fal­se). Natür­lich aber lässt sich auch hier mit­tels der jQuery-​Funktion val() der Wert der Check­box ändern.

Share on LinkedInShare on Redditshare on TumblrShare on StumbleUponDigg thisShare on FacebookGoogle+Tweet about this on TwitterEmail to someone