How do I display the active or inactive checkbox results in the console or store them in an array in javascript?

Question

How do I display the active or inactive checkbox results in the console or store them in an array in javascript?

Navigation

#1 by (6 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

2

I'm 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 by pressing the save button to later work with them . 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>

javascript jquery array checkbox

asked by condor12 08.09.2017 в 08:45

source

5 answers

Slow query PHP MySQL Conditional error in foreach using ASP.Net MVC

score 6 · Answer 1

I will put two options, one with jQuery and another with pure Javascript.

jQuery

One possibility is using map of 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>

Pure Javascript

You can use querySelectorAll (it does not work on older browsers).

Compatibility with versions from:

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>

score 1 · Answer 2

Concerning the original answer you have the possibility to use jQuery.map () , which creates an array for selected checkboxes .

$(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" />

And for JS purists:

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

score 0 · Answer 3

Reusing the code of another question that I just answered:

First I collect the values and store them in an array.

Then I print it in the modal field.

Finally I call the modal.

And responding more in detail to your question:

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

I go through all the checkboxes in the table verifying one by one if they are checked. If so, I pick up its value and insert it into an 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>

score 0 · Answer 4

In Javascript you can check the status of a checkbox in the following way:

document.getElementById('micheck0').checked;

If selected, it will return true , otherwise it will return false .

Having the values of checkbox you can put them in an array in the way that is most comfortable for you.

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>

score 0 · Answer 5

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>

To get another value that is not the value , for example, get the id , replace this section:

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