I am working on a code with checkbox
and I want the results of which boxes are active or inactive to be displayed in the browser console or stored in an array when the save button is pressed so that I can work with them later. The code I have so far is this:
<!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>
I will put two options, one with jQuery and one with pure Javascript.
jQuery
One possibility is using
map
jQuery:pure javascript
You can use
querySelectorAll
(doesn't work in old browsers).Compatibility with versions starting from:
Referring to the original answer you have the possibility to use jQuery.map() , which creates an array for the
checkboxes
selected ones.And for the JS purists:
Javascript (jquery 1.6+) :
Para obtener otro valor que no sea el
value
, por ejemplo obtener elid
, reemplaza esta sección:Reusing code from another question I just answered:
And answering your question in more detail:
I go through all the checkboxes of the table verifying one by one if they are checked. If so, I collect its value and insert it into an array.
In Javascript you can check the state of a checkbox in the following way:
If selected it will return
true
, otherwise it will returnfalse
.Having the values of the
checkbox
you can put them in an array in the way that is most comfortable for you.