2

Estoy trabajando en un código con checkbox y deseo que los resultados de cuales casillas se encuentran activas o cuales inactivas se muestren en la consola del navegador o se almacenen en un array al pulsar el botón guardar para posteriormente poder trabajar con ellas. El código que tengo hasta ahora es este:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formulario</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Estilo.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="divcontenedor">
        <div class="row">
            <div class="col-md-12">
                <div class="tipotex size30 center">Por favor Marque la opcion/opciones deseada:</div>
            </div>
        </div>
        <form >
            <div class="row">
                <div class="col-md-12">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="tipotex size12">Opcion 1</p>
                                </div>
                                <div class="col-md-4">
                                    Estado: <input type="checkbox" id="micheck0" name="micheck">
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="tipotex size12">Opcion 2</p>
                                </div>
                                <div class="col-md-4">
                                    Estado: <input type="checkbox" id="micheck1" name="micheck">
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="tipotex size12">Opcion 3</p>
                                </div>
                                <div class="col-md-4">
                                    Estado: <input type="checkbox" id="micheck2" name="micheck">
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="tipotex size12">Opcion 4</p>
                                </div>
                                <div class="col-md-4">
                                    Estado: <input type="checkbox" id="micheck3" name="micheck">
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="tipotex size12">Opcion 5</p>
                                </div>
                                <div class="col-md-4">
                                    Estado: <input type="checkbox" id="micheck4" name="micheck">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <button type="button" class="btn btn-primary btn-lg" onclick="guardar()">Guardar</button>
        </form>
    </div>
    <script src="js/func.js"></script>
</body>
</html>

3
  • 1
    Posible duplicado de ¿Cómo puedo hacer un arreglo de checkboxes seleccionados en jQuery? Commented el 8 sept. 2017 a las 7:34
  • 2
    Creo que podrían existir ambas preguntas como relacionadas ya que esta abre la posibilidad a código con Javascript puro y eso marca una diferencia importante entre ambas @aldanux
    – A. Cedano
    Commented el 8 sept. 2017 a las 8:25
  • @A.Cedano - Ni idea si es relacionado o duplicado... estoy confuso sobre ese tema... así que lo dejo para que decida la comunidad Commented el 8 sept. 2017 a las 15:43

5 respuestas 5

6

Pondré dos opciones, una con jQuery y otra con Javascript puro.

jQuery

Una posibilidad es usando map de jQuery:

$("#btnEnviar").click(function() {

  var siChequeados = $('input:checkbox:checked').map(function() {
    return this.value;
  }).get();

  console.log(siChequeados);


  var noChequeados = $('input:checkbox:not(:checked)').map(function() {
    return this.value;
  }).get();

  console.log(noChequeados);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>Elija opción</legend>
<input type="checkbox" name="cbxTest" value="1" />Opción 1<br />
<input type="checkbox" name="cbxTest" value="2" />Opción 2<br />
<input type="checkbox" name="cbxTest" value="3" />Opción 3<br />
<input type="checkbox" name="cbxTest" value="4" />Opción 4<br />
<hr />
<button id="btnEnviar">Enviar</button>


Javascript puro

Puedes usar querySelectorAll (no funciona en navegadores antiguos).

Compatibilidad con versiones a partir de:

  • Chrome 1
  • Firefox 3.5 (1.9.1)
  • IE 8
  • Opera 10
  • Safari 3.2

document.getElementById("btnEnviar").onclick = function() {
  var siChequeados = new Array();
  var noChequeados = new Array();

  var checkboxs = 
  document.querySelectorAll('input[name="cbxTest"]').forEach(function(el) {

    if (el.checked) {
      siChequeados.push(el.value);
    } else {
      noChequeados.push(el.value);
    }
  })
  
  console.log(siChequeados);
  console.log(noChequeados);

};
<legend>Elija opción</legend>
<input type="checkbox" name="cbxTest" value="1" />Opción 1<br />
<input type="checkbox" name="cbxTest" value="2" />Opción 2<br />
<input type="checkbox" name="cbxTest" value="3" />Opción 3<br />
<input type="checkbox" name="cbxTest" value="4" />Opción 4<br />
<hr />
<button id="btnEnviar">Enviar</button>

1
  • No conocia map, sin duda mas rapido!
    – GDP
    Commented el 8 sept. 2017 a las 7:21
1

Javascript (jquery 1.6+):

function guardar() {
    var sel=[],nosel=[];
    $('form input:checkbox').map(function(){
        if($(this).prop('checked')){
          sel.push($(this).val());
        }else{
          nosel.push($(this).val());
        }
    })
    console.log("seleccionados");console.log(sel);
    console.log("no seleccionados");console.log(nosel);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="Estilo.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="divcontenedor">
	<div class="row">
		<div class="col-md-12">
			<div class="tipotex size30 center">Por favor Marque la opcion/opciones deseada:</div>
		</div>
	</div>
	<form >
		<div class="row">
			<div class="col-md-12">
				<ul class="list-group">
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-8">
								<p class="tipotex size12">Opcion 1</p>
							</div>
							<div class="col-md-4">
								Estado: <input type="checkbox" id="micheck0" name="micheck" value="micheck0">
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-8">
								<p class="tipotex size12">Opcion 2</p>
							</div>
							<div class="col-md-4">
								Estado: <input type="checkbox" id="micheck1" name="micheck" value="micheck1">
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-8">
								<p class="tipotex size12">Opcion 3</p>
							</div>
							<div class="col-md-4">
								Estado: <input type="checkbox" id="micheck2" name="micheck" value="micheck2">
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-8">
								<p class="tipotex size12">Opcion 4</p>
							</div>
							<div class="col-md-4">
								Estado: <input type="checkbox" id="micheck3" name="micheck" value="micheck3">
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="row">
							<div class="col-md-8">
								<p class="tipotex size12">Opcion 5</p>
							</div>
							<div class="col-md-4">
								Estado: <input type="checkbox" id="micheck4" name="micheck" value="micheck4">
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<button type="button" class="btn btn-primary btn-lg" onclick="guardar()">Guardar</button>
	</form>
</div>
<script src="js/func.js"></script>
</body>
</html>

Para obtener otro valor que no sea el value, por ejemplo obtener el id, reemplaza esta sección:

if($(this).prop('checked')){
    sel.push($(this).attr('id'));
}else{
    nosel.push($(this).attr('id'));
}
1

Referente a la respuesta original tienes la posibilidad de usar jQuery.map(), cual te crea un array para los checkboxes seleccionados.

$(document).on('click', 'input:checkbox', getCheckedBox);

getCheckedBox();

function getCheckedBox() {
  
  var checkedBox = $.map($('input:checkbox:checked'), 
                         function(val, i) {
                            return val.value;
                         });
  console.clear();
  console.log(checkedBox);
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="checkbox" name="colores" value="Azul" checked/>
<input type="checkbox" name="colores" value="Rojo" />
<input type="checkbox" name="colores" value="Verde" checked/>
<input type="checkbox" name="colores" value="Amarillo" />

Y para los puristas de JS:

getCheckedBox();

function getCheckedBox() {
  
  let checkedBox = [].filter.call(document.getElementsByName('colores'), function( cb ) {
  
    return cb.checked;
    
  }).map(function(cb) {
  
    return cb.value;
  });
  
  console.clear();
  console.log(checkedBox);
}
<input type="checkbox" name="colores" onclick="getCheckedBox()" value="Azul" checked/>
<input type="checkbox" name="colores" onclick="getCheckedBox()" value="Rojo" />
<input type="checkbox" name="colores" onclick="getCheckedBox()" value="Verde" checked/>
<input type="checkbox" name="colores" onclick="getCheckedBox()" value="Amarillo" />

0

Reutilizando el código de otra pregunta a la que acabo de responder:

  1. Primero recojo los valores y los guardo en un array.
  2. Despues la imprimo en el campo de la modal.
  3. Finalmente llamo a la modal.

Y respondiendo mas detalladamente a tu pregunta:

$('input[type=checkbox]').each(function () {
    if(this.checked){
      valores.push(
          $(this).parent().parent().find(".opcion").text()
      );
    }
  });

Recorro todos los checkbox de la tabla verificando uno a uno si estan checkeados. Si es asi recojo su valor y lo introduzco en un array.

function guardar() {
  var txt=$("#texto1").val();
  var valores = new Array();
  var sList = "";
  $('input[type=checkbox]').each(function () {
    if(this.checked){
      valores.push(
          $(this).parent().parent().find(".opcion").text()
      );
    }
  });

  $( "#texto2" ).text(valores);
  $( "#dialog" ).dialog();
};
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div>
  
  <p>Por favor Marque la opcion/opciones deseada:</p>
  <table>
  <tr>
    <th>Opcion</th>
    <th>Seleccion</th>
  </tr>
  <tr>
    <td class="opcion">Opcion 1</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="opcion">Opcion 2</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="opcion">Opcion 3</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="opcion">Opcion 4</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="opcion">Opcion 5</td>
    <td><input type="checkbox"></td>
  </tr>
</table>
  <input type="button" value="enviar" onclick="guardar()" />
</body>
</html>
</div>



<div id="dialog" title="Basic dialog">
  <p id="texto2"></p>
</div>

</body>
</html>

0

En Javascript puedes comprobar el estado de un checkbox del siguiente modo:

document.getElementById('micheck0').checked;

Si está seleccionado devolverá true, por lo contrario devolverá false.

Teniendo los valores de los checkbox ya puedes meterlos en un array del modo que más cómodo te sea.

function guardar(){
console.log(document.getElementById('micheck0').checked);
console.log(document.getElementById('micheck1').checked);
console.log(document.getElementById('micheck2').checked);
console.log(document.getElementById('micheck3').checked);
console.log(document.getElementById('micheck4').checked);
}
<div class="divcontenedor">
    <div class="row">
        <div class="col-md-12">
            <div class="tipotex size30 center">Por favor Marque la opcion/opciones deseada:</div>                
        </div>
    </div>
    <form >
        <div class="row">
            <div class="col-md-12">
                <ul class="list-group">
                  <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="tipotex size12">Opcion 1</p>  
                            </div>
                            <div class="col-md-4">
                                Estado: <input type="checkbox" id="micheck0" name="micheck">
                            </div>
                        </div>
                  </li>
                  <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="tipotex size12">Opcion 2</p>  
                            </div>
                            <div class="col-md-4">
                                Estado: <input type="checkbox" id="micheck1" name="micheck">
                            </div>
                        </div>
                  </li>
                  <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="tipotex size12">Opcion 3</p>  
                            </div>
                            <div class="col-md-4">
                                Estado: <input type="checkbox" id="micheck2" name="micheck">
                            </div>
                        </div>
                  </li>
                  <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="tipotex size12">Opcion 4</p>  
                            </div>
                            <div class="col-md-4">
                                Estado: <input type="checkbox" id="micheck3" name="micheck">
                            </div>
                        </div>
                  </li>
                  <li class="list-group-item">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="tipotex size12">Opcion 5</p>  
                            </div>
                            <div class="col-md-4">
                                Estado: <input type="checkbox" id="micheck4" name="micheck">
                            </div>
                        </div>
                  </li>                  
                </ul>
            </div>
        </div>
        <button type="button" class="btn btn-primary btn-lg" onclick="guardar()">Guardar</button>
    </form>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.