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




jquery tutorial (24)

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

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

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

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

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

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

$("form :radio")

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


यदि आप केवल बूलियन मान चाहते हैं, यानी यदि यह चेक किया गया है या इसे आजमाएं नहीं:

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

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

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

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

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

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

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

radios.filter(":checked")

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

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>


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

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

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

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


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


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

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

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

$('.class: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"
}

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

$("input[name='radioName']: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>


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

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

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

$( "input: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();

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


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

$("input:radio: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();

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


मैंने रेडियो-बटन मानों को सेट करने और प्राप्त करने के लिए एक 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 पर जा सकते हैं, और देखें कि यह कैसे काम करता है।

Fiddle


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

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

कोशिश करो-

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

console.log(radioVal);




radio-button