¿Cómo puedo marcar las casillas de verificación en función de los valores?

3 minutos de lectura

Estoy devolviendo una estructura de datos JSON que dividí y rellené mi matriz de esta manera:

var arrayValues = data.contents.split('|');

// arrayValues = 1,3,4

¿Cómo puedo marcar las casillas de verificación correspondientes según los valores de la matriz?

Mi HTML se ve así:

 <div id="divID">
     <input type="checkbox" name="test" value="1" /> Test 1<br />
     <input type="checkbox" name="test" value="2" /> Test 2<br />
     <input type="checkbox" name="test" value="3" /> Test 3<br />
     <input type="checkbox" name="test" value="4" /> Test 4<br />
     <input type="checkbox" name="test" value="5" /> Test 5<br />                           
 </div>

  • ¿Qué criterios le harían marcar/desmarcar las casillas?

    – JaredPar

    29 de noviembre de 2011 a las 18:48

Avatar de usuario de Shankar Sangoli
ShankarSangoli

Prueba esto usando el selector de atributos

$.each(arrayValues, function(i, val){

   $("input[value="" + val + ""]").prop('checked', true);

});

  • Esto funcionó muy bien… todo lo que tenía que hacer era incluir la etiqueta div principal. ¡Gracias!

    – Pablo

    29 de noviembre de 2011 a las 18:55

  • eso debería ser .prop('checked',true) — aunque JS considera que la cadena “marcada” es verdadera, por lo que el resultado final es el mismo.

    – Blazemonger

    29 de noviembre de 2011 a las 19:23

  • Esto es más simple: $('input[name="test"]').val(arrayValues); Ver detalles en mi respuesta [stackoverflow.com/a/44592561/2017567]

    – Christophe Quintard

    21 de noviembre de 2018 a las 10:54


Avatar de usuario de John Hartsock
Juan Hartsock

JavaScript

$.each(arrayValues, function (index, value) {
  $('input[name="test"][value="' + value.toString() + '"]').prop("checked", true);
});

  • Esto parece ser más preciso que la solución de ShankarSangoli, aunque no veo por qué el .toString() en el medio es necesario. Seguramente value será una cadena en todas las circunstancias.

    – Blazemonger

    29 de noviembre de 2011 a las 19:25


  • @ mblase75 … solo un hábito mío.

    – John Hartsock

    29 de noviembre de 2011 a las 19:51

  • Sí, el autor podría haber puesto toString para encargarse de los casos en los que el valor es un número entero, pero eso también sería de tipo cadena en DOM

    – Abdul Vajid

    10 de marzo de 2016 a las 5:43

más simple:

$('input[name="test"]').val(arrayValues);

Esto verificará los valores de la matriz y anulará la selección de los demás.

Del documento de JQuery: http://api.jquery.com/val/

val() le permite pasar una matriz de valores de elementos. Esto es útil cuando se trabaja en un objeto jQuery que contiene elementos como , y

Puede recorrer su matriz y hacer una búsqueda de atributos en jQuery

var i = 0;
while (arrayValues.length < i) {
  var val = arrayValues[i];
  $('#divID input[value="' + val + '"]').prop('checked', 'checked');
  i++;
}

documentos: http://api.jquery.com/attribute-equals-selector/

Bien, me tomó un momento resolver mi error en el código. Supongo que esta pregunta es respondida por ShankarSangoli ahora.

Espero que no te importe que publique mi solución de cualquier manera. Solo tengo curiosidad si esto es peor para el rendimiento, etc.

var arrayValues = new Array(1,3,4);

$('#divID input').filter(function(){
    return ($.inArray( parseInt($(this).attr('value')), arrayValues)) != -1;
}).attr('checked', 'checked');

¿Ha sido útil esta solución?