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


13 Answers

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

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

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

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

$("form :radio")

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




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

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

चेक किए गए एक को पाने के लिए फ़िल्टर करें

radios.filter(":checked")



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

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

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

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




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

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();

इनपुट पर कक्षा का नाम रखने से मुझे आसानी से इनपुट स्टाइल करने की अनुमति मिलती है ...




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

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

इनपुट के चारों ओर उपयोग किए गए नोट को नोट करें: पीटर जे के समाधान की तरह चेक किया गया है और नहीं




डेमो : 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>




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

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



एक और विकल्प है:

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



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



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

मुझे यह जांचने की ज़रूरत है कि 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() !== ''){

    }

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

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

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




इस प्रश्न से , जब आप अपने संबंधित लेबल के लिए एक click ईवेंट में हों तो वर्तमान में चयनित input तक पहुंचने के लिए मैं वैकल्पिक तरीके से आया हूं। इसका कारण यह है कि नए चयनित 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>




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

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

जहां selectOneRadio ID radiobutton_id है और फॉर्म आईडी form_id है

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




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

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

कामकाजी डेमो

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

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




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

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



Related