मुझे कैसे पता चलेगा कि किस रेडियो बटन को jQuery के माध्यम से चुना गया है?

Question

मेरे पास दो रेडियो बटन हैं और मैं चयनित का मान पोस्ट करना चाहता हूं। मैं jQuery के साथ मूल्य कैसे प्राप्त कर सकता हूं?

मैं उन सभी को इस तरह से प्राप्त कर सकता हूं:

$("form :radio")

मुझे कैसे पता चलेगा कि कौन सा चुना गया है?

Answer 1

आईडी के साथ फॉर्म के चयनित radioName आइटम का मूल्य प्राप्त करने के लिए myForm:

$('input[name=radioName]:checked', '#myForm').val()

यहाँ एक उदाहरण है:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Comments

मैंने इसका उपयोग करते हुए समाप्त किया: $ ('फॉर्म इनपुट [टाइप = रेडियो]: चेक किया गया')

— जुआन

@PeterJ: आप बस दो तर्कों का उपयोग क्यों करेंगे '#myform input[name=radioName]:checked'?

— सोफी अल्परट

jQuery सही तरीके से प्रदर्शन करने पर सबसे अच्छा प्रदर्शन करता है, और ID द्वारा चयन करना हमेशा उच्चतम प्रदर्शन करने वाला चयनकर्ता होता है। दो-तर्क पद्धति बस इसे करने का एक और तरीका है।

— पीटर जे जूल

सर्वश्रेष्ठ प्रदर्शन के लिए, दस्तावेज़ीकरण का उपयोग नहीं करने की सलाह देते हैं: रेडियो चयनकर्ता। api.jquery.com/radio-selector

— पीटर जे

वैकल्पिक: $ ('। className: check');

— Meetai.com

Answer 2

इसे इस्तेमाल करो..

$("#myform input[type='radio']:checked").val();

Comments

यदि आपके फॉर्म में रेडियो बटन के कई सेट हैं, तो यह केवल पहले सेट का मूल्य प्राप्त करेगा, मुझे लगता है।

— ब्रैड

यह केवल पहले रेडियो बटन का रिटर्न वैल्यू होगा जिसे फॉर्म में चेक किया गया है। यह पीटर जे द्वारा सुझाए गए तरीके की तरह किया जाना चाहिए।

— मकिज

@ मिक्सजे कोड का यह टुकड़ा पीटर जे से एक जैसा है ... मूल प्रश्न के उपयोग के मामले को ध्यान में रखते हुए। हालाँकि, यदि आपके पास रेडियो बटन के विभिन्न समूह हैं, तो यह काम नहीं करेगा। यही कारण है कि [नाम = चयनकर्ता] का उपयोग करना बेहतर है

— Lyth

जैसा कि @ ब्रैड ने उल्लेख किया है, यह केवल पहले सेट का मूल्य प्राप्त करेगा। आप जो चाहते हैं, वह ".val ()" को ".map (फ़ंक्शन () {रिटर्न दिस.वल्यू;}) के साथ बदलना है। मिल जाएगा ()"

— am_

इसके लायक क्या है, (हाँ, मुझे पता है कि ब्ला ब्ला करने से पहले अनुकूलन करना जानते हैं) लेकिन शुद्ध प्रदर्शन के लिए यह विशेष रूप से पुराने ब्राउज़रों में तेजी से काम करता है:$("#myform").find("input[type='radio']:checked").val();

— मार्क शुल्त्स

Answer 3

यदि आपके पास पहले से एक रेडियो बटन समूह का संदर्भ है, उदाहरण के लिए:

var myRadio = $("input[name=myRadio]");

filter()फ़ंक्शन का उपयोग करें , नहीं find()। ( find()बच्चे / वंशज तत्वों का पता लगाने के लिए है, जबकि filter()आपके चयन में शीर्ष-स्तरीय तत्वों को खोजता है।)

var checkedValue = myRadio.filter(":checked").val();

---

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

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

Comments

मैं सिर्फ स्पष्टता के लिए जोड़ना चाहता था, यह पता चलता है कि () वास्तव में सभी उतरने वाले तत्वों को खोजता है (जो दिए गए चयन से मेल खाता है)। यदि आप केवल सीधे बच्चे चाहते हैं, तो बच्चों () का उपयोग करें।

— मैट ब्राउन

Answer 4

यह काम करना चाहिए:

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

पीटर जे के समाधान की तरह "" प्रयोग किए गए इनपुट पर ध्यान दें: चेक किया गया और '' नहीं

Comments

यह चयनित उत्तर होना चाहिए। नाम रेडियो बटन का ट्रैक रखने के लिए एक बहुत अच्छा तरीका है

— quemeful

Answer 5

आप का उपयोग कर सकते हैं: रेडियो चयनकर्ता के साथ-साथ चयनित चयनकर्ता।

 $("form:radio:checked").val();

Comments

यह अच्छा लग रहा है, हालांकि, jQuery प्रलेखन बेहतर प्रदर्शन के लिए: रेडियो के बजाय [प्रकार = रेडियो] का उपयोग करने की सलाह देता है। यह पठनीयता और प्रदर्शन के बीच एक व्यापार है। मैं आमतौर पर ऐसे तुच्छ मामलों पर प्रदर्शन पर पठनीयता लेता हूं, लेकिन इस मामले में मुझे लगता है कि [प्रकार = रेडियो] वास्तव में स्पष्ट है। तो इस मामले में यह $ ("फार्म इनपुट [प्रकार = रेडियो]: चेक किया गया") की तरह दिखाई देगा। वैल ()। हालांकि अभी भी एक वैध जवाब।

— कोई नहीं

Answer 6

यदि आप सिर्फ बूलियन मान चाहते हैं, तो यह जाँचने या न करने का प्रयास करें:

$("#Myradio").is(":checked")

Answer 7

सभी रेडियो प्राप्त करें:

var radios = jQuery("input[type='radio']");

फ़िल्टर एक thats जाँच पाने के लिए

radios.filter(":checked")

Answer 8

एक अन्य विकल्प है:

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

Comments

"रेडियो" भाग यहाँ आवश्यक नहीं है।

— मैट ब्राउन

Answer 9

$("input:radio:checked").val();

Answer 10

यहां बताया गया है कि मैं कैसे प्रपत्र लिखूंगा और चेक किए गए रेडियो को प्राप्त करना होगा।

MyForm नामक एक फॉर्म का उपयोग करना:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

फॉर्म से मूल्य प्राप्त करें:

$('#myForm .radio1:checked').val();

यदि आप फ़ॉर्म पोस्ट नहीं कर रहे हैं, तो मैं इसका उपयोग करके इसे और सरल करूंगा:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

फिर जाँच मूल्य प्राप्त करना बनता है:

    $('.radio1:checked').val();

इनपुट पर एक क्लास का नाम होने से मैं आसानी से इनपुट को स्टाइल कर सकता हूं ...

Answer 11

मेरे मामले में मेरे पास एक रूप में दो रेडियो बटन हैं और मैं प्रत्येक बटन की स्थिति जानना चाहता था। यह नीचे मेरे लिए काम किया:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

Comments

प्रत्येक बटन की स्थिति से आपका क्या अभिप्राय है? एक ही नाम वाले रेडियो बटन केवल एक को ही चेक करने की अनुमति देते हैं, यदि आप चेक किया हुआ पाते हैं, तो बाकी अनियंत्रित हैं।

— ११:०४ पर दैत्य

Answer 12

एक में JSF उत्पन्न रेडियो बटन (का उपयोग कर <h:selectOneRadio>टैग), तो आप ऐसा कर सकते हैं:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

जहाँ selectOneRadio ID radiobutton_id है और फ़ॉर्म ID form_id है ।

संकेत के रूप में आईडी के बजाय नाम का उपयोग करना सुनिश्चित करें , क्योंकि jQuery इस विशेषता का उपयोग करता है ( नाम जेएसएफ जैसा ही नियंत्रण आईडी से स्वचालित रूप से उत्पन्न होता है)।

Answer 13

इसके अलावा, जांचें कि क्या उपयोगकर्ता कुछ भी नहीं चुनता है।

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

Answer 14

मैंने रेडियो बटन मूल्यों को स्थापित करने और प्राप्त करने के लिए एक jQuery प्लगइन लिखा था। यह उन पर "परिवर्तन" घटना का भी सम्मान करता है।

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

एडिन को सक्षम करने के लिए कोड कहीं भी रखें। फिर आनंद लें! यह कुछ भी तोड़ने के बिना डिफ़ॉल्ट वैल फ़ंक्शन को ओवरराइड करता है।

आप इसे क्रिया में आज़माने के लिए इस jsFiddle पर जा सकते हैं, और देखें कि यह कैसे काम करता है।

बेला

Answer 15

यदि आपके पास एकल रूप में एकाधिक रेडियो बटन हैं

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

यह मेरे लिए काम कर रहा है।

Answer 16

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

Answer 17

यह ठीक काम करता है

$('input[type="radio"][class="className"]:checked').val()

वर्किंग डेमो

:checkedचयनकर्ता के लिए काम करता है checkboxes, radio buttonsऔर तत्वों का चयन करें। केवल चुनिंदा तत्वों के लिए, :selectedचयनकर्ता का उपयोग करें ।

के लिए एपीआई :checked Selector

Answer 18

एक वर्ग का उपयोग करने वाले चयनित रेडियो का मूल्य प्राप्त करने के लिए:

$('.class:checked').val()

Answer 19

मैं इस सरल स्क्रिप्ट का उपयोग करता हूं

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

Comments

यदि आप चाहते हैं कि यह परिवर्तन ईवेंट के बजाय क्लिक ईवेंट का उपयोग करें, तो आप इसे सभी ब्राउज़रों में काम करना चाहते हैं

— मैट ब्राउन

Answer 20

इसे इस्तेमाल करो:

value = $('input[name=button-name]:checked').val();

Answer 21

डेमो : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>

Answer 22

यदि आपके पास केवल 1 फॉर्म पर रेडियो बटन का 1 सेट है, तो jQuery कोड इस प्रकार सरल है:

$( "input:checked" ).val()

Answer 23

मैंने इसके साथ मदद करने के लिए एक पुस्तकालय जारी किया है। वास्तव में सभी संभावित इनपुट मान खींचता है, लेकिन यह भी शामिल है कि कौन सा रेडियो बटन चेक किया गया था। आप इसे https://github.com/mazondo/formalizedata पर देख सकते हैं

यह आपको जवाबों की एक js वस्तु देगा, इसलिए एक फ़ॉर्म:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

तुम्हे दूंगा:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

Answer 24

जावास्क्रिप्ट सरणी में सभी रेडियो बटन मूल्यों को पुनः प्राप्त करने के लिए jQuery कोड का उपयोग करें:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

Comments

रेडियो बटन चेकबॉक्स के समान नहीं हैं। यह उदाहरण चेकबॉक्स का उपयोग करता है।

— मैट ब्राउन

Answer 25

कोशिश करो-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

Answer 26

फॉर्म और चेक किए गए मान में सभी रेडियो बटन प्राप्त करने के लिए JQuery।

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

Answer 27

इसे पाने का दूसरा तरीका:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>

Answer 28

$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

Answer 29

से इस सवाल का , मैं का उपयोग करने की वर्तमान में चयनित एक वैकल्पिक तरीका के साथ आया inputहै जब आप एक के भीतर कर रहे हैं clickअपने संबंधित लेबल के लिए घटना। इसका कारण यह है कि नव चयनित inputको उसके labelक्लिक इवेंट के बाद तक अपडेट नहीं किया गया है ।

टी एल; डॉ

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

Answer 30

सी # कोड को सरल बनाने के लिए मुझे जो करने की आवश्यकता थी, वह यह है कि फ्रंट एंड जावास्क्रिप्ट में जितना संभव हो उतना संभव है। मैं एक फ़ील्ड कंटेनर का उपयोग कर रहा हूं क्योंकि मैं DNN में काम कर रहा हूं और इसका अपना रूप है। इसलिए मैं एक फॉर्म नहीं जोड़ सकता।

मुझे यह परीक्षण करने की आवश्यकता है कि 3 में से कौन सा टेक्स्ट बॉक्स उपयोग किया जा रहा है और यदि यह है, तो खोज का प्रकार क्या है? मूल्य के साथ शुरू होता है, इसमें मूल्य होता है, मूल्य का सटीक मिलान होता है।

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

और मेरा जावास्क्रिप्ट है:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

केवल यह कहकर कि आईडी वाले किसी भी टैग का उपयोग किया जा सकता है। DNNers के लिए, यह जानना अच्छा है। यहां अंतिम लक्ष्य मध्य-स्तरीय कोड के पास है जो SQL सर्वर में भागों की खोज शुरू करने के लिए आवश्यक है।

इस तरह मुझे बहुत अधिक जटिल पिछले C # कोड को भी कॉपी नहीं करना है। हैवी लिफ्टिंग यहीं की जा रही है।

मुझे इसके लिए थोड़ा सा देखना था और फिर इसे काम करने के लिए इसके साथ टिंकर करना था। तो अन्य DNNers के लिए, उम्मीद है कि यह खोजना आसान है।