jQuery चेकबॉक्स ईवेंट हैंडलिंग

136

मेरे पास निम्नलिखित हैं:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

मैं किसी भी चेक ईवेंट को कैप्चर करने के लिए jQuery का उपयोग कैसे करूं myformऔर बताऊं कि कौन सा चेकबॉक्स टॉगल किया गया था (और पता है कि यह ऑन या ऑफ किया गया था)?

jquery html checkbox

— aeq
स्रोत

244

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

— डारिन दिमित्रोव
स्रोत

30

thisचेकबॉक्स के DOM तत्व के लिए पहले से ही सेट है इसलिए this.checkedपर्याप्त है। जब तक आप इसमें हेरफेर नहीं करेंगे, आपको इसके लिए एक और jQuery ऑब्जेक्ट बनाने की आवश्यकता नहीं होगी।

— वाल्फ

18

बस एक छोटी सी टिप। इनपुट का उपयोग करके आपको एक प्रदर्शन को बढ़ावा मिलेगा: अपने चयनकर्ता में चेकबॉक्स केवल के बजाय: चेकबॉक्स चूंकि बाद वाले को सार्वभौमिक चयनकर्ता *: चेकबॉक्स में अनुवाद किया जाता है।

— जिम्मीस्टॉर्मिग

23

क्लिक किसी भी चेक इवेंट के करीब नहीं है ।

— पीटर

27

यह कोई सबसे अच्छा जवाब नहीं है। यदि आपके पास आपके इनपुट के लिए एक समान लेबल है (जैसे <label for='myInput'>Checkbox:</label><input id='myInput' name='myInput' type='checkbox'/>) और आप लेबल पर क्लिक करते हैं, तो चेकबॉक्स की जाँच की जाएगी, लेकिन यह फ़ंक्शन नहीं कहा जाएगा। आपको .change()घटना का उपयोग करना चाहिए

— पैट्रिक

7

यह उत्तर पूरी तरह से उत्तर प्रदान नहीं करता है - कृपया अनुराग के उत्तर को नीचे देखें, जो कि अधिक पूर्ण (और सटीक) उत्तर है। यह उत्तर आंशिक रूप से सही है, लेकिन जैसा कि कहा गया है, यह सबसे अच्छा उत्तर नहीं है।

— कार्निक्स

131

परिवर्तन घटना का उपयोग करें।

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

— अनुराग
स्रोत

5

यदि चेकबॉक्स छिपा हुआ है, तो एक उपयोगकर्ता इसके साथ बातचीत करने में सक्षम नहीं होगा। मुझे पता है अगर तुम कुछ और मतलब था।

— अनुराग

1

इस के लिए आग नहीं है $("input[name=check1]").prop('checked', true)। देखें jsfiddle.net/Z3E8V/2

— पीटर

15

यह डिजाइन द्वारा है। प्रोग्रामेटिक रूप से एक DOM एलिमेंट की प्रॉपर्टी को बदलने से संबंधित ईवेंट हैंडलर ट्रिगर नहीं होते हैं। आपको उन्हें मैन्युअल रूप से फायर करना होगा।

— अनुराग

6

यह चयनित उत्तर होना चाहिए, यह

— पैट्रिक

3

JQuery प्रलेखन से: "क्योंकि :checkboxjQuery एक्सटेंशन है और CSS विनिर्देशन का हिस्सा नहीं है, इसलिए उपयोग करने वाले प्रश्न :checkboxदेशी DOM querySelectorAll()विधि द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ नहीं ले सकते हैं । आधुनिक ब्राउज़रों में बेहतर प्रदर्शन के लिए, [type="checkbox"]इसके बजाय उपयोग करें ।"

— NXT

54

कई उपयोगी उत्तर हैं, लेकिन सभी नवीनतम विकल्पों को कवर करने के लिए कोई भी प्रतीत नहीं होता है । उस अंत तक मेरे सभी उदाहरण मेल खाने वाले labelतत्वों की उपस्थिति के लिए भी पूरा करते हैं और आपको गतिशील रूप से चेकबॉक्स जोड़ने और साइड-पैनल (रीडायरेक्ट करके console.log) में परिणाम देखने की अनुमति देते हैं ।

के लिए सुनकर clickपर घटनाओं checkboxesहै नहीं एक अच्छा विचार है कि कुंजीपटल टॉगल के लिए या बनाया है, जहां एक मिलान परिवर्तन के लिए अनुमति नहीं दी जाएगी के रूप में labelतत्व क्लिक हुआ था। हमेशा changeघटना के लिए सुनो ।
:checkboxइसके बजाय jQuery के छद्म चयनकर्ता का उपयोग करें input[type=checkbox]। :checkboxछोटा और अधिक पठनीय है।
चेकबॉक्स चेक किया गया है या नहीं, इसका परीक्षण करने के is()लिए jQuery के :checkedछद्म चयनकर्ता के साथ प्रयोग करें । यह सभी ब्राउज़रों में काम करने की गारंटी है।

मौजूदा तत्वों से जुड़ी बुनियादी घटना हैंडलर:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

:checkboxचयनकर्ता का उपयोग करता है , जो उपयोग करने के लिए बेहतर हैinput[type=checkbox]
यह केवल उन मिलान तत्वों से जुड़ता है जो उस समय मौजूद थे जब ईवेंट पंजीकृत था।

पूर्वज तत्व से जुड़े प्रतिनिधि हैंडलर:

प्रत्यायोजित ईवेंट हैंडलर उन स्थितियों के लिए डिज़ाइन किए गए हैं जहां तत्व अभी तक मौजूद नहीं हो सकते हैं (गतिशील रूप से लोड या निर्मित) और बहुत उपयोगी है। वे पूर्वज तत्व (इसलिए शब्द) को जिम्मेदारी सौंपते हैं ।

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

यह changeएक गैर-बदलते पूर्वज तत्व ( इस मामले में ) को बुलबुले के लिए घटनाओं (इस मामले में ) को सुनकर काम करता है#myform ।
यह तब jQuery के चयनकर्ता ( ':checkbox'इस मामले में) को केवल बबल चेन के तत्वों पर लागू होता है ।
यह तो ईवेंट हैंडलर फ़ंक्शन को उन मेल खाने वाले तत्वों पर लागू करता है जो ईवेंट का कारण बनते हैं।
documentप्रतिनिधि इवेंट हैंडलर को जोड़ने के लिए डिफ़ॉल्ट के रूप में उपयोग करें , अगर कुछ और करीब / सुविधाजनक नहीं है।
bodyप्रत्यायोजित घटनाओं को संलग्न करने के लिए उपयोग न करें क्योंकि इसमें बग (स्टाइल के साथ करने के लिए) है जो माउस घटनाओं को प्राप्त करने से रोक सकता है।

प्रत्यायोजित संचालकों का उत्थान यह है कि मिलान करने वाले तत्वों को केवल घटना के समय ही मौजूद होना चाहिए , न कि जब घटना के हैंडलर को पंजीकृत किया गया हो। यह घटनाओं को उत्पन्न करने के लिए गतिशील रूप से जोड़ी गई सामग्री की अनुमति देता है।

प्रश्न: क्या यह धीमा है?

ए: जब तक उपयोगकर्ता-इंटरैक्शन गति पर घटनाएं होती हैं, तब तक आपको एक प्रतिनिधि ईवेंट हैंडलर और एक सीधे जुड़े हैंडलर के बीच गति में नगण्य अंतर के बारे में चिंता करने की आवश्यकता नहीं है । प्रतिनिधिमंडल के लाभ किसी भी मामूली नकारात्मक परिणाम से बहुत आगे निकल जाते हैं। प्रत्यायोजित ईवेंट हैंडलर वास्तव में रजिस्टर करने के लिए तेज़ होते हैं क्योंकि वे आम तौर पर एक एकल मिलान तत्व से जुड़ते हैं।

`prop('checked', true)`आग क्यों नहीं लगाता`change`घटना को ?

यह वास्तव में डिजाइन द्वारा है। यदि यह घटना को आग लगा देता है तो आप आसानी से अंतहीन अपडेट की स्थिति में आ जाएंगे। इसके बजाय, जाँच की गई संपत्ति को बदलने के बाद, उसी तत्व का उपयोग करके एक परिवर्तन घटना भेजें trigger(नहीं)triggerHandler ):

बिना triggerकिसी घटना के होता है

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

साथ जैसे triggerसामान्य परिवर्तन घटना पकड़ा है

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

टिप्पणियाँ:

triggerHandlerएक उपयोगकर्ता द्वारा सुझाए गए अनुसार उपयोग न करें, क्योंकि यह एक प्रतिनिधि इवेंट हैंडलर को बबल इवेंट नहीं करेगा ।

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

यद्यपि यह एक ईवेंट हैंडलर के लिए काम करेगा जो सीधे तत्व से जुड़ा है:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

.TriggerHandler () DOM पदानुक्रम को बुलबुला न करें; यदि उन्हें सीधे लक्ष्य तत्व द्वारा नियंत्रित नहीं किया जाता है, तो वे कुछ भी नहीं करते हैं।

संदर्भ: http://api.jquery.com/triggerhandler/

यदि किसी के पास अतिरिक्त विशेषताएं हैं, तो उन्हें लगता है कि यह इसके द्वारा कवर नहीं किया गया है, कृपया सुझाव जोड़ दें ।

— चला गया
स्रोत

31

JQuery (1.7) में नई 'ऑन' पद्धति का उपयोग करना: http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

ईवेंट हैंडलर पर रहेगा
चेकबॉक्स को कीबोर्ड से बदला गया था, न कि केवल क्लिक करने पर

— एलन हैमिल्टन
स्रोत

1

इस के लिए आग नहीं है $("input[name=check1]").prop('checked', true)। देखें jsfiddle.net/Z3E8V/2

— पीटर

7

बस कॉल के .triggerHandler('change');बाद जोड़ें .prop। तब यह बॉक्स को चालू करेगा और ईवेंट को कॉल करेगा।

— हन्ना

5

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

— सोचने वाला
स्रोत

val()अगर checkedहै तो आपको नहीं बताता true।

— वाल्फ

5

इस तथ्य को स्वीकार करते हुए कि पूछने वाले ने विशेष रूप से jQuery का अनुरोध किया और यह कि चयनित उत्तर सही है, यह ध्यान दिया जाना चाहिए कि इस समस्या को वास्तव में प्रति jQuery की आवश्यकता नहीं है । यदि कोई इसके बिना इस समस्या को हल करने की इच्छा रखता है, तो व्यक्ति बस इसे निर्धारित कर सकता हैonClick चेकबॉक्स विशेषता जिसे वह या वह अतिरिक्त कार्यक्षमता जोड़ना चाहता है, जैसे:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

जावास्क्रिप्ट:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

फिडल: http://jsfiddle.net/Y9f66/1/

— चेस सैंडमैन
स्रोत

5

घटना संचालकों को सीधे HTML काम में लाना, निश्चित रूप से। लेकिन यह डीआरवाई और प्रगतिशील वृद्धि के तरीकों के साथ सीधे संघर्ष में है। एक अधिक सटीक उत्तर यह होगा कि "आपको ईवेंट हैंडलर जोड़ने के लिए jQuery की आवश्यकता नहीं है" और इसके बजाय, मानक जेएस का उपयोग करके HTML में ऑनक्लिक विशेषताओं को डालने के बजाय एक अलग जेएस फ़ाइल में क्लिक हैंडलर संलग्न करें। ऐसा करने से "काम" होता है, लेकिन अच्छा कोडिंग अभ्यास आपको निर्धारित करता है कि आपको जब संभव हो तो इससे बचना चाहिए (जो लगभग हमेशा इस बिंदु पर होता है जब तक आपको IE6 या कुछ का समर्थन नहीं करना चाहिए, जो एमएस भी कहता है कि आपको अब और नहीं करना चाहिए)

— कार्निक्स

3

मैंने पहले उत्तर से कोड की कोशिश की है, यह काम नहीं कर रहा है लेकिन मेरे चारों ओर खेल है और यह मेरे लिए काम करता है

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});

— सोमवांग सौक्षवद
स्रोत

jQuery चेकबॉक्स ईवेंट हैंडलिंग

मौजूदा तत्वों से जुड़ी बुनियादी घटना हैंडलर:

टिप्पणियाँ:

पूर्वज तत्व से जुड़े प्रतिनिधि हैंडलर:

टिप्पणियाँ:

prop('checked', true)आग क्यों नहीं लगाताchangeघटना को ?

`prop('checked', true)`आग क्यों नहीं लगाता`change`घटना को ?