Seleccionar solo 1 checkbox con HTML y JavaScript

Published on junio 7, 2022

420 views

Seleccionar solo 1 checkbox con HTML y JavaScript

En formularios que creamos se requieren que usemos casillas para seleccionar con 1 checkbox, para esto podemos usar HTML pero en algunos caso tenemos mas de 1 checkbox a seleccionar y en el resultado solo queremos una opción seleccionada porque solo se puede enviar un valor, entonces en esos casos podemos usar JavaScript y crear una función que valide si un checkbox está seleccionado quitar el check de las demás casillas.

Lo primero que debemos hacer es crear el cuerpo de la hoja HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seleccionar solo 1 checkbox</title>
</head>
<body>

</body>
</html>

Ahora dentro <body> de la hoja de HTML creamos los campos que queremos checkear y validar:

<div style="text-align: center;">
<h1>Seleccionar solo 1 checkbox</h1>
<h2><b>Checkbox's Opcion 1:</b></h2>
<br>
<label><input type="checkbox" id="myCheck1" onclick="check1()" checked><b>Checkbox 1</b></label>
<label><input type="checkbox" id="myCheck2" onclick="check2()"><b>Checkbox 2</b></label>
<label><input type="checkbox" id="myCheck3" onclick="check3()"><b>Checkbox 3</b></label>
</div>

A continuación creamos una hoja .js donde crearemos el script para validar los checkbox y dentro de hoja HTML llamaremos este script con el etiqueta <script language=javascript src=”script.js”></script> pero debe estar en la parte inferior antes del </body>

HTML:

<script language=javascript src="script.js"></script>
</body>
</html>

JavaScrip:

function check1() {
document.getElementById("myCheck2").checked = false;
document.getElementById("myCheck3").checked = false;
}
function check2() {
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck3").checked = false;
}
function check3() {
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck2").checked = false;
}

Ya con este código podemos probar y validar los checkbox pero para hacerlo mejor he integrado otro ejemplo con botones que se pueden usar para checkear una casilla o así mismo quitarle el check porque a veces se requieren estos validadores, el resultado de esto lo puedes ver en la parte de abajo de esta publicación.

CODIGO

Seleccionar solo 1 checkbox con HTML y JavaScript

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seleccionar solo 1 checkbox</title>
</head>
<body>
<div style="text-align: center;">
<h1>Seleccionar solo 1 checkbox</h1>
<h2><b>Checkbox's Opcion 1:</b></h2>
<br>
<label><input type="checkbox" id="myCheck1" onclick="check1()" checked><b>Checkbox 1</b></label>
<label><input type="checkbox" id="myCheck2" onclick="check2()"><b>Checkbox 2</b></label>
<label><input type="checkbox" id="myCheck3" onclick="check3()"><b>Checkbox 3</b></label>
</div>
<div style="text-align: center;">
<h2><b>Checkbox's Opcion 2:</b></h2>
<br>
<label><input type="checkbox" id="myCheck"><b>Checkbox 1</b></label>
<br><br>
<button class="w-btn us-btn-style_2 us_custom_064d3121 icon_atright" onclick="check()">Check Checkbox</button>
<button onclick="uncheck();">Uncheck Checkbox</button>
</div>
<script language=javascript src="script.js"></script>
</body>
</html>

JavaScript:

/* Opcion 1 */
function check1() {
document.getElementById("myCheck2").checked = false;
document.getElementById("myCheck3").checked = false;
}

function check2() {
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck3").checked = false;
}

function check3() {
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck2").checked = false;
}
/* Opcion 1 */

/* Opcion 2 */
function check() {
document.getElementById("myCheck").checked = true;
}

function uncheck() {
document.getElementById("myCheck").checked = false;

}
/* Opcion 2 */