Jquery: Wiązanie zmiany na wiele pól wyboru

Question

Dla odrobiny tła, mam wiele pól wyboru, każdy ważony z innym "wynikiem". Gdy pole wyboru zostanie zmienione, muszę obliczyć wynik. Pomyślałem, że coś takiego działa, ale nie wygląda na to, że zdarzenie .change jest poprawnie powiązane.

$(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 
      } 
     }); 
    }); 
} 

Wiem, że poprawnie przechodzi przez macierz, ale alert w .change nigdy nie jest widoczny.

Answer 1

Jeśli naprawdę chciał wziąć tego podejścia z użyciem identyfikatorów, chciałbym zrobić osobną tablicę z identyfikatorami i zrobić .join() aby stworzyć selektor.

Niektóre rzeczy do uwaga:

• Zamiast .is(':clicked') lub .is(':checked') użyć this.checked. O wiele bardziej wydajny.
• obsługi zdarzeń w jQuery mieć jeden parametr, który odwołuje się do event. Masz 2 dla key,value. To sprawia, że ​​key w module obsługi odwołuje się do tego obiektu zamiast do key z $.each().
• Wewnątrz uchwytu, this odnosi się do tego, który został kliknięty.
• Ponieważ masz odniesienie do elementu this, nie potrzebujesz odniesienia do key w $.each().Możesz po prostu zrobić 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

stosowanie try „wiązać” i „: zaznaczone”

$.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

Polecam uzyskania pól wyboru w bardziej naturalny sposób ...

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

Jeśli chcesz ograniczyć których wyboru, aby użyj, możesz dodać klasę, ale jeśli możesz uniknąć dodawania niepotrzebnych zajęć, twój html będzie czystszy.

Answer 4

polecam dodanie pojemnika i zaznacz wszystkie pola wyboru na raz.

A co do Twojego pytania, podpis razie jest źle, prawidłowa jest function(e){}. Musisz również sprawdzić, czy element jest zaznaczony, a nie kliknięty.

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

Aby łatwiej użyć pojemnik

HTML Sample

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

A dla wyników, wolę, aby ustawić dane na temat elementów, np:

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