jQuery, radio buttons en checkboxes

Soms kan het vrij frustrerend zijn om met radio buttons of checkboxen te werken met Javascript. Daarom heb ik hier een paar voorbeelden gemaakt om het leven een klein beetje makkelijker te maken.

Checkboxen aanvinken

Een checkbox aanvinken kun je eenvoudig doen door het atribuut checked in te stellen. Wanneer je deze de waarde checked (inderdaad, dezelfde waarde als het attribuut zelf), worden de checkbox(es) ingeschakeld:

  1. $("a#enableCheckbox").click( function() {
  2.   $("input[name=voorbeeld1]").attr('checked', 'checked');
  3. });
Voorbeeld Checkbox
Checkbox
Checkbox
Selecteer checkboxen

Checkboxes uitvinken

Het uitvinken van de checkboxen werkt bijna hetzelfde als aanvinken, echter moet het attribuut checked worden leeggehaald of verwijderd.

  1. $("a#disableCheckbox").click( function() {
  2.   $("input[name=voorbeeld2]").attr('checked', '');
  3. });
Voorbeeld Checkbox
Checkbox
Checkbox
Deselecteer checkboxen

Checkboxes aan- en uitvinken

Met behulp van Toggle() kunnen de checkboxes om en om aan en uitgevinkt worden:

  1. $("a#toggleBoxes").toggle( function() {
  2.   $("input[name=voorbeeld3]").attr('checked', 'checked');
  3.   return false;
  4. }, function () {
  5.   $("input[name=voorbeeld3]").attr('checked', '');
  6.   return false;
  7. });
Voorbeeld Checkbox
Checkbox
Checkbox
Checkboxen aan-uitvinken

Radiobuttons

Radio buttons werken bij hetzelfde, echter kan er maximaal maar 1 optie tegelijk geselecteerd worden. Probeer je er meerdere tegelijk aan te passen, dan zal enkel de laatste geselecteerd worden.

  1. $("a#toggleRadio").toggle( function() {
  2.   $("input[name=voorbeeld4]:eq(0)").attr('checked', 'checked');
  3.   return false;
  4. }, function () {
  5.   $("input[name=voorbeeld4]:eq(1)").attr('checked', 'checked');
  6.   return false;
  7. }, function () {
  8.   $("input[name=voorbeeld4]:eq(2)").attr('checked', 'checked');
  9.   return false;
  10. });
Voorbeeld Radio button
Radio button
Radio button
Selecteer de volgende radio button

Radio buttons uitvinken

Een radio button uitvinken gaat hetzelfde als bij checkboxen:

  1. $("a#disableRadio").click( function() {
  2.   $("input[name=voorbeeld5]").attr('checked', '');
  3.   return false;
  4. });
Voorbeeld Radio button
Radio button
Radio button
Geselecteerde waarde weghalen

Het in of uitschakelen van radiobuttons en checkboxes

Het is ook mogelijk om een radiobutton of checkbox uitteschakelen zodat deze niet meer aangevinkt kan worden. Dit wordt gedaan door het disabled attribuut te vullen. Wanneer deze leeggehaald of verwijderd wordt, kan de radiobutton of checkbox weer gebruikt worden.

  1. $("a#disableFormFields").toggle( function() {
  2.   $("input[name=voorbeeld6]").attr('disabled', 'disabled');
  3.   return false;
  4. }, function () {
  5.   $("input[name=voorbeeld6]").attr('disabled', '');
  6.   return false;
  7. });
Voorbeeld Radio button
Radio button
Radio button
Elementen in- of uitschakelen