रेडियो बटन समूह - बटनों के लिए ईवेंट बदलें अचयनित हो जाते हैं?

Question

चलो कहते हैं कि मैं दो रेडियो बटन के एक समूह है:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

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

Answer 1

मैं पुष्टि नहीं कर सकता है कि एक घटना केवल चयनित बटन के लिए निकाल दिया जाता है, लेकिन अगर आप बटन है कि बस का चयन रद्द किया गया था के साथ कुछ करने के लिए की जरूरत है, निम्नलिखित काम करेगा:

$(document).ready(function(){ 
    var selectedRadio = null; 
    $("input:radio").change(function(){   
     if(selectedRadio != null){ 
      alert(selectedRadio.val()); 
     } 
     selectedRadio = $(this); 
    }); 
}); 

कार्रवाई here में ।

यदि आपको रेडियो बटन के कई समूहों का ट्रैक रखने की आवश्यकता है, तो आप इसे वर्तमान में चयनित बटनों की एक सरणी के साथ कर सकते हैं और परिवर्तन के दौरान उस सरणी के भीतर मिलान कर सकते हैं।

Answer 2

हालांकि इसकी पुष्टि नहीं की जा सकती है, लेकिन घटना परिवर्तन ट्रिगर्स पूरे समूह पर नहीं होते हैं।

से आप ऐसा करना चाहते हैं, तो आप यह jQuery, YUI, आदि या यहाँ तक कि सादे जावास्क्रिप्ट जैसे विभिन्न जे एस पुस्तकालयों का उपयोग कर सकते, इस प्रकार है:

function buttonGroupChange(){ 
    var radioElements = document.getElementsByName("radio_group_name"); 
    for(var i = 0; i < radioElements.length; i++){ 
     if(radioElements[i].checked == true){ 
      //do something 
     } 
     else{ 
      //do something 
     } 
    } 
} 

इस समारोह onClick या पर कहा जा सकता है ऑन चेंज इवेंट।

मुझे आशा है कि आपकी समस्या हल हो जाएगी।

Answer 3

सबसे पहले, यह ध्यान रखना महत्वपूर्ण है कि किसी भी रेडियो पर आग पर "क्लिक" घटना पहले से अपडेट की गई है। यह महत्वपूर्ण है - क्योंकि इसका मतलब है कि ईवेंट पहले ही निकाल दिए जाने के बाद आप पिछले आइटम का पता नहीं लगा सकते हैं। यदि आप ईवेंट को रद्द करते हैं, तो आप वास्तव में मूल्य को बदल रहे हैं - शुरुआत में इसे रोक नहीं सकते। यह महत्वपूर्ण है कि आप समस्या से कैसे संपर्क करें।

उदाहरण:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

<script type="text/javascript"> 
    var $last = $('[name=radioButtonGroup]:checked'); 

    // Select the radio buttons as a group. 
    var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) { 
     // Click event handler 
     var $clicked = $(ev.target); // This is the radio that just got clicked. 
     $last.trigger('unclick'); // Fire the "unclick" event on the Last radio. 

     $last = $('[name=radioButtonGroup]:checked'); // Update the $last item. 

     // Should see the clicked item's "Value" property. 
     console.log("Clicked " + $clicked.attr('value'), $clicked, ev); 
    }).bind('unclick', function (ev) { 
     // Handler for our new "unclick" event. 
     // - fires whenever a radio loses focus. 
     var $unclicked = $(ev.target); // The radio losing it's checked status. 

     // Should see the unclicked item's "Value" property. 
     console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev); 
    }); 
</script> 

एक काम के लिए:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/> 
<input type="radio" name="radioButtonGroup" value="button2"/> 

// At this point, the ':checked' item is button1. 
$('input[type=radio]').bind('click', function (ev) { 
    // If you click on button2 - by this point, the ':checked' item is already button2. 
    ev.preventDefault(); // These two lines will stop the radio from actually 
    ev.stopPropagation(); // changing selection. 

    // At this point, the ':checked' item is set BACK to button1. 
}); 

इस वजह से

, सबसे आसान समाधान के रूप में निम्नानुसार, अपने ईवेंट हैंडलर्स के साथ एक बंद में "पिछले" चयनित आइटम को ट्रैक करने के उदाहरण के लिए, देखें:

http://jsfiddle.net/TroyAlford/wvrtC/

Answer 4

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

यदि आप ऐसे तत्व का उपयोग करना चाहते हैं जो एकाधिक चयनों की अनुमति देता है तो चेकबॉक्स को आजमाएं।

Answer 5

यदि आप jQuery का उपयोग कर रहे हैं, तो आप इसे एक कस्टम ईवेंट बांध सकते हैं और ट्रिगर कर सकते हैं जिसे हम deselect नाम देते हैं।

नीचे दिए गए कोड का उपयोग करके हम deselect ईवेंट को परिभाषित करते हैं।

$(document).ready(function(){ 
    var selectedRadioList = {}; 

    $('input:radio:checked').each(function(){ 
     selectedRadioList[this.name] = this; 
    }); 

    $('input:radio').click(function(){ 
     if(selectedRadioList[this.name]) 
      $(selectedRadioList[this.name]).trigger('deselect'); 

     selectedRadioList[this.name] = this; 
    }); 
}); 

और अब हम जहां भी हमें चाहिए deselect से बांध सकते हैं।

$(document).ready(function(){ 
    $('input:radio').on('deselect', function(){ 
     alert('radio `' + this.value + '` has been deselected'); 
    }); 
});