जावास्क्रिप्ट jquery रेडियो बटन क्लिक करें


89

मेरे पास 2 रेडियो बटन और jquery चल रहे हैं।

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

अब, एक बटन के साथ मैं एक फ़ंक्शन चलाने के लिए onClick पर सेट कर सकता हूं। जब मैं उनमें से किसी एक पर क्लिक करता हूं तो रेडियो बटन बनाने का क्या तरीका है?


4
ध्यान दें। के रूप में कई लोगों को क्लिक करने के लिए फार्म तत्वों का जवाब नहीं देना सबसे अच्छा है, क्योंकि कई लोग कीबोर्ड का उपयोग करके फ़ॉर्म नेविगेट करते हैं।
superluminary

जवाबों:


166

आप .changeजो चाहें वो उपयोग कर सकते हैं

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

1.3 jQuery के रूप में

अब आपको '@' की आवश्यकता नहीं है। चयन करने का सही तरीका है:

$("input[name='lom']")

7
ध्यान दें कि, jQuery 1.3 के रूप में, आपको अब '@' की आवश्यकता नहीं है। चयन करने का सही तरीका है:$("input[name='lom']")
lubar

4
क्या यह संभव है कि रेडियो मानों के आधार पर सशर्त बयानों के साथ @ जोनीडॉल के समाधान के साथ इस समाधान को एकीकृत किया जाए? पूर्व$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
LazerSharks

JQuery 1.3 के रूप में, आपको नाम संपत्ति के साथ '@' का उपयोग नहीं करना चाहिए । यदि आप ऐसा करते हैं, तो आपको एक jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionत्रुटि मिलेगी । तो यह पसंद की बात नहीं है।
डरावनी

53

यदि आपके पास id = RadioButtonContainerId के साथ एक कंटेनर में आपका रेडियो है, तो आप अभी भी onClick का उपयोग कर सकते हैं और फिर जांच सकते हैं कि कौन सा चयनित है और तदनुसार कुछ फ़ंक्शन चलाएं:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

धन्यवाद। यह मेरे लिए काम करता है, क्योंकि मेरा क्षेत्र एक सरणी का हिस्सा था और मैं इनपुट [नाम = 'xxx'] नोटेशन - <इनपुट प्रकार = "रेडियो" नाम = "की आवश्यकता नहीं है" का उपयोग नहीं कर सका "id_type]" आईडी = "Need_measure_type" value = "aaa">
crafter

क्या यह तब भी प्रतिक्रिया करता है जब आप नीचे तीर छोड़ते हैं और तीर के साथ मार्कर को स्थानांतरित करते हैं?
एलिसो

यह मोबाइल में काम नहीं करेगा # चयनकर्ता मोबाइल में काम नहीं कर रहा है।
zawhtut

19
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

1
यद्यपि यह उत्तर यह नहीं दिखाता है कि घटना के कोड को कैसे वायर किया जाए, मुझे यह पसंद है कि इसमें रेडियो बटन समूह के मूल्य को पुनः प्राप्त करने के लिए जानकारी शामिल थी।
मैनफ्रेड

1
$ ("इनपुट [@ नाम = 'लोम']")। परिवर्तन (फ़ंक्शन () {// यहाँ कुछ दिलचस्प करो});
बिशोय हन्ना


8

इसे करने बहुत सारे तरीके हैं। रेडियो बटन के चारों ओर एक कंटेनर होने की परवाह किए बिना अत्यधिक अनुशंसा की जाती है, लेकिन आप सीधे बटन पर एक वर्ग भी रख सकते हैं। इस HTML के साथ:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

आप वर्ग द्वारा चयन कर सकते हैं:

$(".shapeButton").click(SetShape);

या कंटेनर आईडी द्वारा चयन करें:

$("#shapeList").click(SetShape);

किसी भी स्थिति में, ईवेंट रेडियो बटन या इसके लिए लेबल पर क्लिक करने पर ट्रिगर हो जाएगा, हालांकि बाद वाले मामले में अजीब तरह से ("#shapeList द्वारा चयन"), लेबल पर क्लिक करने से किसी कारण से दो बार क्लिक फ़ंक्शन ट्रिगर हो जाएगा, कम से कम फ़ायरफ़ॉक्स में; वर्ग द्वारा चयन करना ऐसा नहीं होगा।

SetShape एक फ़ंक्शन है, और इस तरह दिखता है:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

इस तरह, आप अपने बटनों पर लेबल लगा सकते हैं, और एक ही पृष्ठ पर कई रेडियो बटन सूचियाँ रख सकते हैं जो अलग-अलग काम करते हैं। आप एक ही सूची में प्रत्येक व्यक्ति बटन को बटन के मूल्य के आधार पर सेटशैप () में अलग व्यवहार सेट करके अलग-अलग काम कर सकते हैं।


3

DOM सर्च को प्रतिबंधित करना हमेशा अच्छा होता है। एक माता-पिता का उपयोग करना भी बेहतर है, ताकि पूरे DOM को ट्रैवर्स न किया जा सके।

यह बहुत तेज़ है

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.