रेडियो बटन का पता लगाने के लिए ईवेंट का चयन रद्द करें?

Question

क्या रेडियो बटन पर "अचयनित" ईवेंट संलग्न करने का कोई आसान तरीका है? ऐसा लगता है कि परिवर्तन ईवेंट केवल तभी होता है जब बटन चुना जाता है।

एचटीएमएल

<input type="radio" id="one" name="a" /> 
<input type="radio" id="two" name="a" /> 

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

$('#one').change(function() { 
    if(this.checked) { 
     // do something when selected 
    } else { // THIS WILL NEVER HAPPEN 
     // do something when deselected 
    } 
});​ 

jsFiddle

Answer 1

क्यों आप बस एक कस्टम घटना की तरह नहीं बनाते हैं, कहते हैं, deselect और यह तत्व में ही छोड़कर क्लिक किया रेडियो समूह के सभी सदस्यों पर ट्रिगर क्लिक किए गए जाने की सुविधा देता है? इवेंट हैंडलिंग एपीआई का उपयोग करना आसान तरीका है जो jQuery उस तरह प्रदान करता है।

एचटीएमएल

<!-- First group of radio buttons --> 
<label for="btn_red">Red:</label><input id="btn_red" type="radio" name="radio_btn" /> 
<label for="btn_blue">Blue:</label><input id="btn_blue" type="radio" name="radio_btn" /> 
<label for="btn_yellow">Yellow:</label><input id="btn_yellow" type="radio" name="radio_btn" /> 
<label for="btn_pink">Pink:</label><input id="btn_pink" type="radio" name="radio_btn" /> 
<hr /> 
<!-- Second group of radio buttons --> 
<label for="btn_red_group2">Red 2:</label><input id="btn_red_group2" type="radio" name="radio_btn_group2" /> 
<label for="btn_blue_group2">Blue 2:</label><input id="btn_blue_group2" type="radio" name="radio_btn_group2" /> 
<label for="btn_yellow_group2">Yellow 2:</label><input id="btn_yellow_group2" type="radio" name="radio_btn_group2" /> 
<label for="btn_pink_group2">Pink 2:</label><input id="btn_pink_group2" type="radio" name="radio_btn_group2" /> 

jQuery

// Attaching click event handlers to all radio buttons... 
$('input[type="radio"]').bind('click', function(){ 
    // Processing only those that match the name attribute of the currently clicked button... 
    $('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); // Every member of the current radio group except the clicked one... 
}); 

$('input[type="radio"]').bind('deselect', function(){ 
    console.log($(this)); 
}) 

अचयन घटनाओं केवल एक ही रेडियो समूह (तत्व है कि एक ही name विशेषता) के सदस्यों के बीच ट्रिगर किया जाएगा।

jsFiddle solution

संपादित करें: आदेश संलग्न लेबल टैग के सभी संभावित प्लेसमेंट (रेडियो तत्व लपेटकर या एक आईडी चयनकर्ता के माध्यम से संलग्न किया जा रहा) के लिए खाते में करने के लिए यह शायद करने के लिए onchange घटना उपयोग करने के लिए बेहतर है हैंडलर ट्रिगर करें। Faust को इंगित करने के लिए धन्यवाद।

$('input[type="radio"]').on('change', function(){ 
    // ... 
} 

Answer 2

फिर के लिए hows इस?

http://jsfiddle.net/WZND9/6/

$('input').change(function() { 
    if ($('#one').is(':checked')) { 
     alert('checked'); 
    } else { 
     alert('not checked'); 
    } 
}); 

Answer 3

मुझे लगता है कि क्योंकि focus ईवेंट ट्रिगर से पहले change घटना इसलिए अगले रेडियो आप क्लिक पिछले जाँच रेडियो से पहले ध्यान केंद्रित किया जाएगा एक परिवर्तन ईवेंट ट्रिगर करता है यह हो रहा जा सकता है। हालांकि इस पर मुझे बोली मत करो ...

आप इस तरह यह कर सकता है:

var isChecked = function(id) { alert(id + ': ' + $('#' + id).is(':checked')) } 
$('input[name="a"]').change(function(){ isChecked('one') }) 

डेमो:http://jsfiddle.net/elclanrs/cD5ww/

Answer 4

आप एक कस्टम घटना अपेक्षाकृत दर्द बना सकते हैं "का चयन रद्द", लेकिन जैसा कि आप पहले ही खोज चुके हैं कि मानक परिवर्तन घटना केवल नए चेक किए गए रेडियो बटन पर ट्रिगर की गई है, न कि पहले चेक किए गए एक पर जिसे अभी अनचेक किया गया है।

आप कहने के लिए कुछ तरह सक्षम होने के लिए करना चाहते हैं:

$("#one").on("deselect", function() { 
    alert("Radio button one was just deselected"); 
}); 

फिर अपने दस्तावेज़ तैयार हैंडलर से निम्नलिखित समारोह की तरह कुछ चलाने के (या अपने दस्तावेज़ तैयार हैंडलर में सीधे कोड डाल):

function setupDeselectEvent() { 
    var selected = {}; 
    $('input[type="radio"]').on('click', function() { 
     if (this.name in selected && this != selected[this.name]) 
      $(selected[this.name]).trigger("deselect"); 
     selected[this.name] = this; 
    }).filter(':checked').each(function() { 
     selected[this.name] = this; 
    }); 
} 

कार्य डेमो:http://jsfiddle.net/s7f9s/2

क्या करता है एक क्लिक डालता है पृष्ठ पर सभी रेडियो पर हैंडलर (यह आपको अपने स्वयं के क्लिक ईवेंट हैंडलर को एक ही रेडियो में जोड़ने से नहीं रोकता है) जो जांच करेगा कि पहले समूह में पहले से चयनित रेडियो था (यानी, उसी नाम के साथ) और यदि तो पर रेडियो पर एक "अचयनित" ईवेंट ट्रिगर करें। फिर यह वर्तमान क्लिक के रूप में बस क्लिक किए गए एक को बचाता है। यदि आप पहले से चेक किए गए रेडियो पर क्लिक करते हैं या यदि पहले कोई चेक नहीं किया गया था तो "अचयनित करें" ईवेंट ट्रिगर नहीं किया जाता है। अंत में .filter().each() बिट यह नोट करना है कि कौन से रेडियो पहले से ही चयनित हैं। (यदि आपको उसी पृष्ठ पर एक से अधिक फॉर्मों को एक ही नाम के स्वतंत्र रेडियो समूहों को पूरा करने की आवश्यकता है, तो तदनुसार फ़ंक्शन को अपडेट करें।)

Answer 5

मुझे लगता है कि आपको इनपुट स्तर पर परिवर्तन फ़ंक्शन जोड़ने की आवश्यकता है, बल्कि प्रत्येक रेडियो बटन की तुलना में।

इस प्रयास करें:

$("input[name='a']").change(function() { 
    $("input[name='a']").each(function(){ 
    if(this.checked) { 
     // do something when selected 
    } else { 
     // do something when deselected 
    } 
    }); 
});​ 

Answer 6

मैंने पाया सबसे आसान तरीका है एक नया ढांचा एक deselected घटना बनाने के लिए में डाले बिना यह करने के लिए है कि, किसी भी रेडियो बटन पर एक update घटना ट्रिगर बदलते बनाने के लिए है अपने समूह में रेडियो बटन के सभी और उसके बाद अद्यतन ईवेंट में इच्छित व्यवहार को परिभाषित करें।

नकारात्मकता यह है कि डिसेक्शन शाखा में कोड तब भी चलाया जाएगा जब रेडियो बटन पहले नहीं चुना गया था। यदि आप जो कुछ भी कर रहे हैं वह यूआई तत्वों को सरल दिखाना, छिपाना या अक्षम करना है, इससे कोई फर्क नहीं पड़ता।

अपने उदाहरण का उपयोग करने के लिए:

buttons = $('input[name="a"]'); 
buttons.change(function() { 
    buttons.trigger('update:groupA'); 

}).bind('update:groupA', function(){ 
    if(this.checked) { 
     //Do your checked things 
    } else { 
     //Do your unchecked things. Gets called whenever any other button is selected, so don't toggle or do heavy computation in here. 
    } 
});​ 

Answer 7

आप 'बदलें' घटना अपने आप को गति प्रदान कर सकते हैं। यह एक सा असीम ट्रिगर एक दूसरे पर 'बदलें' घटना रेडियो बटन से बचने के लिए मुश्किल है, लेकिन यह इस तरह किया जा सकता है:

$('input[type="radio"]').each(function() { 
    var name = $(this).attr('name'); 
    var that = this; 
    $('input[name="'+name+'"][type="radio"]').not(that) 
     .on('change', function(e, alreadyTriggered) { 
      if(!alreadyTriggered || alreadyTriggered.indexOf(this) == -1) { 
       if(!alreadyTriggered) { 
        alreadyTriggered = [that]; 
       } 
       alreadyTriggered.push(this); 
       $(that).trigger('change', [alreadyTriggered]); 
      } 
    }); 
}); 

यहाँ demo काम पर उपरोक्त कोड के है।

Answer 8

मुझे के लिए मेरे विशिष्ट मामले के लिए एक समाधान मिला जो मदद कर सकता है। यह तब काम करता है जब "अचयनित" ईवेंट उन सभी रेडियो बटनों पर लागू किया जा सकता है जो चयनित नहीं हैं।

1. तत्व करने के लिए एक वर्ग जोड़ने जब radiobutton चुना गया था, और
2. उस वर्ग को दूर जब बटन था "अचयनित":

   मैं करना चाहता था।

   $('input:radio').on('change', function() { 
       if($(this).is(':checked')) { 
        $(this).addClass('my-class-for-selected-buttons') 
       } else { // THIS WILL NEVER HAPPEN 
        $(this).removeClass('my-class-for-selected-buttons') 
       } 
   });​ 
   

   लेकिन, मेरे मामले में, समाधान काफी आसान था, क्योंकि मैं सब से वर्ग दूर करने की कोशिश कर सकते हैं:

मैं क्योंकि मैं एक ही समस्या थी, इस सवाल का पता लगाने के लिए हुआ इस सरल ट्वीक साथ

$('input:radio').on('change', function() { 
    $('input:radio').removeClass('my-class-for-selected-buttons') // Here! 

    if($(this).is(':checked')) { 
     $(this).addClass('my-class-for-selected-buttons') 
    } 
});​ 

, मैं "का चयन रद्द" घटना को गति प्रदान करने के लिए एक रास्ता खोजने की जरूरत नहीं थी: रेडियो बटन बहुत jQuery के साथ बस, और फिर चयनित एक के लिए वर्ग जोड़ें।

तो, आपके मामले में अगर आप घटना सभी रेडियो बटन कि चयनित नहीं हैं, और न केवल एक ही है कि है बस की गई "का चयन रद्द करने के लिए", तो आप इस उपाय का उपयोग कर सकते करने के लिए आवेदन कर सकते हैं!