मैं कैसे टॉगल radiobutton

Question

कहो यह मेरी HTML है कर सकते हैं:

<input type="radio" name="rad" id="Radio0" checked="checked" /> 
<input type="radio" name="rad" id="Radio1" /> 
<input type="radio" name="rad" id="Radio2" /> 
<input type="radio" name="rad" id="Radio4" /> 
<input type="radio" name="rad" id="Radio3" /> 

आप देख सकते हैं 1 रेडियो बटन को चेक किया गया। टॉगल की तरह काम करने के लिए मुझे रेडियो बटन चाहिए। उदाहरण के लिए। अगर मैं फिर से radio0 पर क्लिक करता हूं, तो सभी रेडियो बटन अनचेक किए जाने चाहिए।

मैं इसे कैसे प्राप्त कर सकता हूं?

अद्यतन: मुझे कोई अतिरिक्त बटन नहीं चाहिए। उदाहरण के लिए। मैं एक बटन जोड़ सकता हूं और सभी रेडियो बटनों के लिए गलत होने के लिए चेक की गई संपत्ति सेट कर सकता हूं। हालांकि, मुझे वह नहीं चाहिए। मैं केवल अपने फॉर्म को इन 4 रेडियो बटनों से जोड़ना चाहता हूं।

अद्यतन: चूंकि अधिकांश लोग समझ में नहीं आते हैं कि मैं क्या चाहता हूं, मुझे फिर से बदलने की कोशिश करें- मैं चाहता हूं कि रेडियो बटन टॉगल मोड में कार्य करे। मैंने सभी रेडियो बटनों पर एक ही नाम दिया है इसलिए यह एक समूह है। अब मैं रेडियोबूटन खुद को टॉगल करना चाहता हूं। उदाहरण के लिए। अगर मैं रेडियो 0 पर क्लिक करता हूं, तो इसे अनचेक किया जाना चाहिए यदि यह चेक किया गया है और चेक किया गया है तो यह अनचेक किया गया है।

Answer 1

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

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

तुम भी शुरू में जाँच की रेडियो मार्कअप

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" /> 

से इस विशेषता को जोड़ने की आवश्यकता होगी डेमो यहाँ देखें: http://jsfiddle.net/GoranMottram/VGPhD/2/

Answer 2

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

Answer 3

मैं एक onClick() अपने कस्टम रेडियो के लिए निम्नलिखित की तरह का उपयोग करें:

$(function(){ 
    // if selected already, deselect 
    if ($(this).hasClass('selected') { 
    $(this).prop('checked', false); 
    $(this).removeClass('selected'); 
    } 
    // else select 
    else { 
    $(this).prop('checked', true); 
    $(this).addClass('selected'); 
    } 
    // deselect sibling inputs 
    $(this).siblings('input').prop('checked', false); 
    $(this).siblings('input').removeClass('selected'); 
}