Seleccionar solo 1 checkbox con HTML y JavaScript

CódigoHTMLJavaScript
185 views
No hay comentarios

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 */

PROBAR RESULTADO

Checkbox’s Opcion 1:

Checkbox’s Opcion 2:



En este enlace pueden leer mas sobre JavaScript, herramientas y funciones: https://developer.mozilla.org/es/docs/Web/JavaScript

Si tiene alguna duda puede dejar un comentario en esta publicación para aclararla.

También comentar si quiere publicar un tutorial.

Saludos!!

Tags: , ,
También podría gustarte:
¿Te gusta este artículo? ¡Compartir con tus amigos!

Lea también:

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.
Tienes que aprobar los términos para continuar

Menú
× ¿Cómo podemos ayudarte?