Web Design Blog / Programowanie:

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.7 (93.33%) głosów: 15

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

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