Web Design Blog / JavaScript:

Jak pogodzić technologię AJAX i pole checkbox

Checkbox ma tendencję do zadziwiania, szczególnie wtedy kiedy po rzeczach na pierwszy rzut oka prostych w działaniu spodziewamy się zwykle prostych mechanizmów rządzącymi tymi rzeczami. Checkbox to ten wyjątek który potwierdza regułę.

Dlaczego? Otóż checkbox zwraca wartość z atrybutu value tylko wtedy, kiedy jest zaznaczony (atrybut checked). Kiedy checkbox nie ma ustawionego atrybutu value zwraca ciąg „on” – zawsze coś. Najlepsze jest to, że kiedy checkbox ma ustalony atrybut value nie da się jego stanu pobrać za pomocą metody .val() w jQuery. Bo niezależnie od tego czy jest włączony czy nie, zwraca wartość która jest ustawiona w atrybucie value.

Powiesz: co za problem zbadać jego stan sprawdzając .attr(„checked”)? OK, tylko wtedy kod przestaje być kompatybilny z przesyłaniem formularza za pomocą tradycyjnych metod.

Oto moja sztuczka:

Na początku ustawiamy faktyczną wartość (powiedzmy że, checkbox jest odpowiedzialny za włączenie i wyłączenie jakieś funkcji w ustawieniach aplikacji internetowej)

<checkbox class="x" value="1">

Tą jedynkę oczywiście pobieramy sobie z back-endu (równie dobrze może tam być zero, wtedy checkbox nie będzie zaznaczony). Najpierw zaznaczamy lub odznaczamy checkbox w zależności od stanu faktycznego.

$(".x").each(function(){
   if($(this).val() == 1){
      $(this).prop('checked', true);
   }
   else{
      $(this).prop('checked', false);
   }
});

Potem zmieniamy dynamicznie atrybut value w zależności od działań użytkownika.

$(".x").change(function(){
   if($(this).attr("checked")){
      $(this).val("1");
   }
   else{
      $(this).val("0");
   }
});

Teraz możemy spokojnie pobrać metodą val() stan checkboxa.

Co dzięki temu uzyskujemy? Przede wszystkim lepszą czytelność kodu i bardziej intuicyjne działanie. Jeżeli z jakichś powodów będziemy chcieli formularz wysyłać tradycyjną metodą, nie musimy niczego zmieniać w kodzie formularza. Piszemy mniej a wszystko działa tak jak należy zarówno od strony front-endu jak i back-endu.

Jak pogodzić technologię AJAX i pole checkbox
4.55 (90.91%) głosów: 11

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail