Jquery: एकाधिक चेकबॉक्स में बाध्यकारी परिवर्तन

पृष्ठभूमि के कुछ हिस्सों के लिए, मेरे पास एकाधिक चेकबॉक्स हैं, प्रत्येक एक अलग "स्कोर" के साथ भारित हैं। जब चेकबॉक्स बदल जाता है, तो मुझे स्कोर की गणना करने की आवश्यकता होती है। मैंने सोचा कि निम्नलिखित की तरह कुछ काम करेगा लेकिन ऐसा नहीं लगता है। एक्सचेंज इवेंट ठीक से बाध्य किया जा रहा है।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 
      } 
     }); 
    }); 
}

मुझे पता है कि यह सरणी के माध्यम से सही ढंग से लूपिंग कर रहा है, लेकिन एक्सचेंज में एक चेतावनी कभी नहीं देखी जा रही है।

स्रोत

2010-10-13 Magic Hat

यह होना चाहिए ': बजाय' की checked': clicked', अधिक जानकारी के लिए मेरा उत्तर देखें। – BrunoLM

ऐसा लगता है कि सभी उत्तरों इस तथ्य को याद कर रहे हैं कि प्रत्येक आईडी में एक अद्वितीय "स्कोर" होता है। यही कारण है कि मेरे पास आईडी -> स्कोर का मानचित्रण है। मैंने क्लिक किए गए -> ऊपर सुधार किए गए सुधार किए और टिप्पणियों को बदलने के लिए जो मैं पूरा करने की कोशिश कर रहा हूं उसे बदल दिया। मैं स्वीकार करूंगा कि मैं इस सब गलत के बारे में जा रहा हूं। ;) –

मैंने एक उत्तर जोड़ा जो उस मूल संरचना को रखता है जिसके साथ आप काम कर रहे थे। मुझे लगता है कि आप हैंडलर के अंदर 'कुंजी' को संदर्भित करने की कोशिश कर रहे थे क्योंकि यह आईडी होगी। समस्या यह थी कि आपने अपने हैंडलर को अपना 'कुंजी' पैरामीटर दिया, जो वास्तव में 'ईवेंट' ऑब्जेक्ट का जिक्र कर रहा है। उस निकालें (या नाम बदलें), और आपके पास 'key' होगा। लेकिन आपको इसकी आवश्यकता नहीं है, क्योंकि आपके पास जिस आईडी की आवश्यकता है उसका प्रत्यक्ष संदर्भ है क्योंकि 'यह' घटना प्राप्त करने वाले व्यक्ति का संदर्भ देता है, इसलिए 'this.id' उस आईडी का आईडी है। – user113716

तुम सच में आईडी का उपयोग का यही तरीका अपनाने करना चाहता था, तो मैं पहचान पत्र का एक अलग सरणी बनाने चाहते हैं, और बनाने के लिए एक .join() करना चयनकर्ता।

कुछ बातें ध्यान रखें:

.is(':clicked') या .is(':checked') के बजाय, this.checked का उपयोग करें। अधिक कुशल
jQuery में ईवेंट हैंडलर में एक पैरामीटर है जो event को संदर्भित करता है। आपके पास key,value के लिए 2 है। यह हैंडलर में key से key के बजाय event ऑब्जेक्ट को संदर्भित कर रहा है।
एक हैंडलर के अंदर, this उस पर क्लिक किया गया था जिसे क्लिक किया गया था।
क्योंकि आपके पास this तत्व के संदर्भ में है, तो आपको में 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 :) –

@ मैजिक - आपका स्वागत है। अगर आपके कोई प्रश्न हैं तो मुझे बताएं।: ओ) – user113716

हे सब के बाद यह मुझे एहसास हुआ कि यह आंशिक रूप से काम नहीं कर रहा है क्योंकि इन चेकबॉक्स वाले div $ (दस्तावेज़) पर उपलब्ध नहीं हैं। पहले से ... गलत चीजों को गलत तरीके से डीबग करना। –

कोशिश उपयोग 'बाँध' और ': जाँच की'

$.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 $ (यह) .change (... $ (this) .bind ("change", ... – Fenton

मैं एक और अधिक प्राकृतिक तरीके से चेक बॉक्स प्राप्त करने की सिफारिश करेंगे ...

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

आप सीमित करना चाहते हैं जो चेक बॉक्स को उपयोग करें, आप एक वर्ग जोड़ सकते हैं, हालांकि यदि आप अनावश्यक कक्षाओं को जोड़ने से बच सकते हैं, तो आपका एचटीएमएल क्लीनर होगा।

स्रोत

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

मुझे इस दृष्टिकोण को भी पसंद है। कुछ अलग ब्रूनो के लिए धन्यवाद। –

Jquery: एकाधिक चेकबॉक्स में बाध्यकारी परिवर्तन

उत्तर

संबंधित मुद्दे