Jquery: Enlace cambiar a casillas de verificación múltiples

Question

Para tener un poco de fondo, tengo varias casillas de verificación, cada una ponderada con un "puntaje" diferente. Cuando se cambia la casilla de verificación, necesito calcular el puntaje. Pensé que algo así podría funcionar, pero no parece que el evento .change se vincule correctamente.

$(document).ready(function() { 
    bindSomeCheckboxes(); 
}); 

function bindSomeCheckboxes() { 
    var score=0; 
    var checkboxes = { 
     "id_1" : 3, 
     "id_2" : 1, 
     "id_3" : 2, 
     "id_4" : 5 
    }; 

    $.each(checkboxes, function(key, value) { 
     $("#"+key).change(function(key,value) { 
      if ($("#"+key).is(':checked')) { 
       //add this ids value to score 
      } else { 
       //subtract value from score 
      } 
     }); 
    }); 
} 

Sé que es un bucle a través de la matriz correctamente, pero nunca se ve una alerta en .Cambiar.

Answer 1

Si realmente quería tomar ese enfoque de utilizar identificaciones, me gustaría hacer una matriz separada de las identificaciones, y hacer un .join() para crear el selector.

Algunas cosas a tener en cuenta:

• En lugar de .is(':clicked') o .is(':checked'), utilice this.checked. Mucho más eficiente.
• Los controladores de eventos en jQuery tienen un parámetro que hace referencia al event. Tienes 2 para key,value. Esto hace que key en el controlador se refiera a ese objeto event en lugar del key del $.each().
• Dentro de un controlador, this se refiere al que se hizo clic.
• Como tiene this referencia al elemento, no necesita la referencia a key en el $.each().Puedes hacer this.id.

---

function bindSomeCheckboxes() { 
    var score=0; 
    var checkboxes = { 
     "id_1" : 3, 
     "id_2" : 1, 
     "id_3" : 2, 
     "id_4" : 5 
    }; 

    var arrayOfIds = []; // to store array of ids 

    $.each(checkboxes,function(key, val) { // populate array with ids 
     arrayOfIds.push(key); 
    }); 

     // create a selector of the IDs 
    $("#" + arrayOfIds.join(',#')).change(function() { 
      // alert the score 
     alert(checkboxes[ this.id ]); 
     if (this.checked) { 
      //do something when it is checked 
     } else { 
      //do something else 
     } 
    }); 
} 

Answer 2

uso try 'bind' y ': marcado'

$.each(checkboxes, function(key, value) { 
    $(this).bind('change', function() { 
     if ($(this).is(':checked')) { 
     //do something when it is checked 
     } else { 
     //do something else 
     } 
    }); 
}); 

Answer 3

Yo recomendaría la obtención de las casillas de verificación de una manera más natural ...

$("input[type='checkbox']").change(function() { 
    alert("Event is bound"); 
}); 

Si desea restringir el cual casillas de verificación para use, podría agregar una clase, aunque si puede evitar agregar clases innecesarias, su html estará más limpio.

Answer 4

Le recomiendo que agregue un contenedor y seleccione todas las casillas de verificación a la vez.

Y en cuanto a su pregunta, la firma del evento es incorrecta, la correcta es function(e){}. Además, debe verificar si el elemento está marcado y no ha hecho clic.

$("#chk").change(function(e){ 
    if ($(this).is(":checked")) 
     alert("checked"); 
    else 
     alert("not checked"); 
}); 

Para hacerlo más fácil, utilizar un recipiente

HTML de ejemplo

<div id="checks"> 
    <input type="checkbox" id="chk1" /> 
    <input type="checkbox" id="chk2" /> 
    <input type="checkbox" id="chk3" /> 
    <input type="checkbox" id="chk4" /> 
</div> 

Y para las puntuaciones, prefiero establecer datos en los elementos, ejemplo:

$("#chk1").data("Score", 3); 
$("#chk2").data("Score", 1); 
$("#chk3").data("Score", 2); 
$("#chk4").data("Score", 5); 

$("#checks :checkbox").change(function(e){ 
    if ($(this).is(":checked")) 
     alert("checked Score: " + $(this).data("Score")); 
    else 
     alert("not checked Score: " + $(this).data("Score")); 
}); 

• See this example on jsFiddle.
• jQuery change event
• :checked selector
• .data