Lo Zibaldone Informatico - Gestire i checkbox con JavaScript

Trasmettere i dati dei check-box attraverso un campo nascosto.

Questa funzione JavaScript gestisce la sincronizzazione tra uno checkbox e un campo nascosto (INPUT type=hidden) all'interno di un modulo. Quando l'utente seleziona o deseleziona il checkbox, la funzione aggiorna dinamicamente il valore del campo di testo.

Se il checkbox è selezionato, il valore del campo di testo viene impostato a 1.
Se il checkbox è deselezionato, il valore diventa 0.

L'evento click è collegato al checkbox tramite un Event Listener, che richiama la funzione fnct_chk con l'ID del checkbox e del campo di testo come parametri. Questo approccio è utile per inviare uno stato booleano (1 o 0) al server o per gestire dinamicamente valori nascosti in un modulo HTML.

Codice

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input id="chk_id" type="checkbox" name="" checked>
<input id="txt_id" type="text" name="myName" value="1"><!-- type="hidden" -->
</form>
<script>
function fnct_chk(box_id, val_id)
	{
	if(document.getElementById(box_id).checked == true)
		{
		document.getElementById(val_id).value = 1;
		}
		else
			{
			document.getElementById(val_id).value = 0;
			}
	}
document.getElementById("chk_id").addEventListener("click", function(){fnct_chk("chk_id", "txt_id");})
</script>
</body>
</html>

Output