Jquery：綁定更改爲多個複選框

對於一點點背景，我有多個複選框，每個複選框用不同的「分數」加權。當複選框更改時，我需要計算分數。我認爲像下面這樣的東西會起作用，但它看起來並不像.change事件被正確綁定。Jquery：綁定更改爲多個複選框

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

我知道它正確地循環訪問數組，但.change中的警報永遠不會被看到。

來源

2010-10-13 Magic Hat

它應該是'：checked'，而不是'：clicked'，看到我的回答更多信息。 – BrunoLM 2010-10-13 14:50:12

似乎所有的答案都缺少這樣一個事實，即每個ID都有一個獨特的「分數」。這就是爲什麼我有id - >分數的映射。我做了點擊 - >檢查修正上面，並改變了評論，以顯示我想要完成的。我承認我可能會把這全部弄錯。 ;） – 2010-10-13 14:51:42

我添加了一個答案，以保持您正在使用的基本結構。我想你試圖在處理程序內部引用'key'，認爲它會有ID。麻煩的是，你給你的處理器自己的'key'參數，它實際上是指'event'對象。刪除（或重命名），並且你有'鑰匙'。但是你不需要它，因爲你直接引用了你需要的ID，因爲'this'引用了接收事件的那個，所以'this.id'就是這個ID的ID。 – user113716 2010-10-13 14:59:55

如果你真的想採取使用ID的這種做法，我會做的ID的單獨陣列，並做了.join()創建選擇。

需要注意以下幾點：

代替.is(':clicked')或，使用this.checked。效率更高。
jQuery中的事件處理程序有一個參數，指向event。你有2個key,value。這使得處理器中的key參考event對象，而不是$.each()中的。
在處理程序中，this指的是被點擊的程序。
因爲您有this對元素的引用，所以在$.each()中不需要引用key。你可以做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 
     } 
    }); 
}

來源

2010-10-13 14:57:10 user113716

謝謝。我在找什麼，解釋我對正在發生的事情和可能的解決方案的誤解+1 :) – 2010-10-13 15:04:43

@Magic - 不客氣，讓我知道你是否有任何問題：o） – user113716 2010-10-13 15:08:09

heh畢竟這只是意識到這不起作用，部分原因是包含這些複選框的div在$（document）.ready中不可用。好的時候調試錯誤的東西。 – 2010-10-13 15:13:00

嘗試使用「綁定」和「：檢查」

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

來源

2010-10-13 14:39:56 Floyd

在jQuery $（this）.change（...是簡寫爲$（this）.bind（「change」，... – Fenton 2010-10-13 14:42:30

我會建議以更自然的方式獲得的複選框...

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

如果你想限制其複選框使用，你可以添加一個類，但如果你可以避免添加不必要的類，你的html將會更清晰。

來源

2010-10-13 14:41:36 Fenton

我建議您添加一個容器並一次選中所有複選框。

至於你的問題，事件的簽名是錯誤的，正確的是function(e){}。此外，你必須檢查元素是否被選中，而不是點擊。

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

爲了更方便，使用容器

樣本HTML

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

而對於分數，我更喜歡設置上的元素，例如數據：

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

來源

2010-10-13 14:44:04 BrunoLM

我也喜歡這種方法，感謝Bruno。 – 2010-10-13 15:19:06

Jquery：綁定更改爲多個複選框

回答

相關問題