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




html jquery-selectors radio-button (25)

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

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

कामकाजी डेमो

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

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

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

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

$("form :radio")

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


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

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

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


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

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

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

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

आपको :checked चयनकर्ता के साथ पहुंच की आवश्यकता है:

इस दस्तावेज़ को जांचें:

एक उदाहरण:

$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
	$('#val').text($('input[name=radioName]:checked', '#myForm').val());
});
#val {
  color: #EB0054;
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Radio value: <span id='val'><span></h3>
<form id="myForm">
  <input type="radio" name="radioName" value="a"> a <br>
  <input type="radio" name="radioName" value="b"> b <br>
  <input type="radio" name="radioName" value="c"> c <br>
</form>


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

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

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

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

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

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


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

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

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


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

यह आपको उत्तर का जेएस ऑब्जेक्ट देगा, इसलिए एक फॉर्म:

<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"
}

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

मुझे यह जांचने की ज़रूरत है कि 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 सर्वर में पार्ट्स खोज शुरू करने के लिए आवश्यक है।

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

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


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

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

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

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

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

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

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

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

कोशिश करो-

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

console.log(radioVal);

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

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

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

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

इसे पाने का एक और तरीका:

 $("#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>


इस प्रश्न से , जब आप अपने संबंधित लेबल के लिए एक 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>


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

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

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

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


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

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

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

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

// 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>


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

$('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>


मुझे मिला एक समाधान <form> एक छुपा iFrame को लक्षित <form> था। IFrame तब उपयोगकर्ता को प्रदर्शित करने के लिए जेएस चला सकता है कि यह पूर्ण हो गया है (पृष्ठ लोड पर)।





javascript jquery html jquery-selectors radio-button