Personalização dos checkboxes e radios

Tech-FestivalDoJapao · Oct 2, 2024 · 44347b5 · 44347b5
1 parent 35760a3
commit 44347b5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/fj-tech/src/js/fichas/cadastra_voluntario.mjs b/fj-tech/src/js/fichas/cadastra_voluntario.mjs
@@ -13,6 +13,8 @@ let nomeCompleto = document.getElementById("nomeCompletoDoVoluntario");
 let cpfVoluntario = document.getElementById("cpfDoVoluntario");
 let emailVoluntario = document.getElementById("emailDoVoluntario");
 let telefoneVoluntario = document.getElementById("telefoneDoVoluntario");
+let sexoVoluntario = document.getElementById("sexoDoVoluntario");
+
 // Endereço
 let cepVoluntario = document.getElementById("cepDoVoluntario");
 let logradouroVoluntario = document.getElementById("enderecoDoVoluntario");

diff --git a/fj-tech/src/js/form.js b/fj-tech/src/js/form.js
@@ -21,6 +21,30 @@ document.querySelectorAll("input").forEach(input => {
     if (input.type === "checkbox" || input.type === "radio") {
         input.classList.remove("border-0");
         input.classList.add("border", "border-opacity-75");
+
+        input.addEventListener("focus", () => {
+            if (input.type === "checkbox") {
+                input.addEventListener("change", () => {
+                    if (input.checked) {
+                        input.classList.add("bg-danger");
+                    } else {
+                        input.classList.remove("bg-danger");
+                    }
+                });
+            } 
+
+            if (input.type === "radio") {
+                input.addEventListener("change", () => {
+                    document.querySelectorAll(`input[name="${input.name}"]`).forEach(radio => {
+                        if (radio.checked) {
+                            radio.classList.add("bg-danger");
+                        } else {
+                            radio.classList.remove("bg-danger");
+                        }
+                    });
+                });
+            }
+        });
     } 
 });