Obtener todas las casillas de verificación seleccionadas en una matriz

168

Entonces tengo estas casillas de verificación:

<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />

Y así. Hay alrededor de 6 de ellos y están codificados a mano (es decir, no se obtienen de una base de datos), por lo que es probable que permanezcan iguales por un tiempo.

Mi pregunta es cómo puedo obtenerlos todos en una matriz (en javascript), para poder usarlos mientras hago una $.postsolicitud AJAX usando Jquery.

¿Alguna idea?

Editar: solo me gustaría que las casillas de verificación seleccionadas se agreguen a la matriz

javascript jquery ajax dhtml Haga clic en Upvote
fuente

Posible duplicado de la matriz de múltiples casillas de verificación jquery

Jason C

Si bien la otra pregunta es más nueva y esta es más popular, la otra tiene una colección de respuestas mejor y más sucinta (incluidas las estrategias aquí, más algunas).

Jason C

331

Formateado:

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Con suerte, funcionará.

ybo
fuente

1

y qué hacer si desmarca la casilla de verificación, para eliminar el valor de la matriz

Jubin Patel

@JubinPatel solo necesita restablecer la matriz antes de este código. yourArray = []

RRK

11

También puede definir su matriz inmediatamente usando en maplugar de each:var yourArray = $("input:checkbox[name=type]:checked").map(function(){return $(this).val()}).get()

Duvrai

3

function get_selected_checkboxes_array(){                                     var ch_list=Array();                                     $("input:checkbox[type=checkbox]:checked").each(function(){ch_list.push($(this).val());});                                     return ch_list;                                     }

M al

50

var chk_arr =  document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;             

for(k=0;k< chklength;k++)
{
    chk_arr[k].checked = false;
}

Milind
fuente

66

Según entiendo el código anterior, itera a través de todas las casillas de verificación y las desmarca. ¿Cómo se conecta esta respuesta con la pregunta?

Terite

2

Esto simplemente recorre las casillas de verificación y las desmarca. Para la respuesta correcta, en VanillaJS, vea la respuesta de zahid ullah a continuación.

jmknoll

2

¿Cómo responde esto a la pregunta? Esto hace algo completamente ajeno a lo que se pide. ¿Por qué hay tantos votos a favor? ¿Me estoy perdiendo algo o la pregunta se editó después de que la gente lo votó?

Shubham Chaudhary

46

JS puro

Para aquellos que no quieren usar jQuery

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

Chris Underdown
fuente

55

Siempre me encanta una respuesta vainilla JS.

formicini

39

No lo probé pero debería funcionar

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

  $("input:checkbox[name=type]:checked").each(function() {
       selected.push($(this).val());
  });

});

</script>

Alp Barbaros
fuente

presionar para agregar valor en la matriz, pero ¿qué eliminar al desmarcar?

Jubin Patel

24

Esto debería funcionar:

$('input:checked');

No creo que tenga otros elementos que puedan verificarse, pero si lo hace, tendría que hacerlo más específico:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');

Georg Schölly
fuente

14

En MooTools 1.3 (más reciente al momento de escribir):

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});

LeeGee
fuente

77

No me di cuenta de que la edad de la pregunta o la naturaleza de la solución era relevante.

LeeGee

44

Porque encontré esta pregunta al buscar la respuesta al mismo problema usando MooTools.

LeeGee

Tenga en cuenta que esta respuesta se relaciona con MooTools 1.3, no con jQuery.

LeeGee

13

Si desea utilizar un JS de vainilla, puede hacerlo de manera similar a un @ zahid-ullah, pero evitando un bucle:

  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });

El mismo código en ES6 se ve mucho mejor:

var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);

Mostrar fragmento de código

window.serialize = function serialize() {
  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });
  document.getElementById('serialized').innerText = JSON.stringify(values);
}

label {
  display: block;
}

<label>
  <input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
  <input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
  <input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
  <input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
  <input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>

Expandir fragmento

Terite
fuente

12

En Javascript sería así (Enlace de demostración) :

// get selected checkboxes
function getSelectedChbox(frm) {
  var selchbox = [];// array that will store the value of selected checkboxes
  // gets all the input tags in frm, and their number
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
  }
  return selchbox;
}

zahid ullah
fuente

12

Versión ES6:

const values = Array
  .from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);

Mostrar fragmento de código

function getCheckedValues() {
  return Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);
}

const resultEl = document.getElementById('result');

document.getElementById('showResult').addEventListener('click', () => {
  resultEl.innerHTML = getCheckedValues();
});

<input type="checkbox" name="type" value="1" />1
<input type="checkbox" name="type" value="2" />2
<input type="checkbox" name="type" value="3" />3
<input type="checkbox" name="type" value="4" />4
<input type="checkbox" name="type" value="5" />5

<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>

Expandir fragmento

quotesBro
fuente

5

JavaScript puro sin necesidad de variables temporales:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked")).map(e => e.value)

Wilbert
fuente

solución más concisa usando vainilla JS

M. Mufti

3

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

Jean-Marc Amon
fuente

3

Al marcar agregue el valor para la casilla de verificación y al desmarcar reste el valor

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});

<div id="myDiv">
  <input type="checkbox" name="type" value="4.00" />
  <input type="checkbox" name="type" value="3.75" />
  <input type="checkbox" name="type" value="1.25" />
  <input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Expandir fragmento

Joepraveen
fuente

Agregue un poco de explicación a su respuesta. Las respuestas de código puro no suelen ser útiles.

sjaustirni

3

Otra forma de hacer esto con Vanilla JS en los navegadores modernos (no es compatible con IE, y lamentablemente no es compatible con Safari de iOS en el momento de la escritura) es con FormData.getAll () :

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked

foz
fuente

1

Usando Jquery

Solo necesita agregar clase a cada entrada, tengo agregar clase "fuente", puede cambiarla, por supuesto

<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />

<script type="text/javascript">
$(document).ready(function() {
    var selected_value = []; // initialize empty array 
    $(".source:checked").each(function(){
        selected_value.push($(this).val());
    });
    console.log(selected_value); //Press F12 to see all selected values
});
</script>

Ahmed Al Bermawy
fuente

1

Utilizar este:

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

MHK
fuente

0

Utilice el bloque if comentado para evitar agregar valores que ya están en la matriz si usa el botón o algo para ejecutar la inserción

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});

<div id="myDiv">
  <input type="checkbox" name="type" value="4" />
  <input type="checkbox" name="type" value="3" />
  <input type="checkbox" name="type" value="1" />
  <input type="checkbox" name="type" value="5" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Expandir fragmento

Nisal Edu
fuente

0

Podrías probar algo como esto:

$('input[type="checkbox"]').change(function(){
       var checkedValue = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();         
            alert(checkedValue);   //display selected checkbox value     
 })

aquí

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,

pappu kr Sharma
fuente

0

Aquí está mi código para el mismo problema, alguien también puede probar esto. jquery

<script>
$(document).ready(function(){`
$(".check11").change(function(){
var favorite1 = [];        
$.each($("input[name='check1']:checked"), function(){                    
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
});
});
});
</script>

Rahul Gupta
fuente

0

function selectedValues(ele){
  var arr = [];
  for(var i = 0; i < ele.length; i++){
    if(ele[i].type == 'checkbox' && ele[i].checked){
      arr.push(ele[i].value);
    }
  }
  return arr;
}

Expandir fragmento

kapil
fuente

Para una respuesta útil, esta reacción debe extenderse. Explica por qué esta es una respuesta a la pregunta.

Jeroen Heier

Bienvenido a Stack Overflow y gracias por tu contribución. Sería bueno que leyeras esta guía Cómo escribir una buena respuesta y ajustar tu respuesta en consecuencia. ¡Gracias!

David

0

var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });

Salione
fuente

Obtener todas las casillas de verificación seleccionadas en una matriz

Respuestas: