jQuery चयनित रेडियो बटन का मूल्य मिलता है




radio-button siebel (17)

इस सरल विषय को समझाने का सबसे अच्छा तरीका सरल उदाहरण और संदर्भ लिंक दे रहा है: -

निम्नलिखित उदाहरण में हमारे पास दो रेडियो बटन हैं। यदि उपयोगकर्ता कोई रेडियो बटन चुनता है, तो हम चयनित रेडियो बटन मान को अलर्ट बॉक्स में प्रदर्शित करेंगे।

एचटीएमएल:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jQuery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

समस्या कथन सरल है। मुझे यह देखने की ज़रूरत है कि क्या उपयोगकर्ता ने रेडियो समूह से रेडियो बटन चुना है या नहीं। समूह में प्रत्येक रेडियो बटन एक ही आईडी साझा करता है।

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

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

इसके अलावा जब एक रेडियो बटन चुना जाता है तो यह नियंत्रण में "चेक" विशेषता नहीं जोड़ता है, केवल टेक्स्ट चेक किया जाता है (मुझे लगता है कि केवल संपत्ति के बिना चेक की गई संपत्ति) । नीचे एक चयनित रेडियो नियंत्रण कैसा दिखता है

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

क्या कोई मुझे jQuery कोड के साथ मदद कर सकता है जो मुझे चेक किए गए रेडियो बटन का मूल्य प्राप्त करने में मदद कर सकता है?


चयनित रेडियो बटन का मूल्य प्राप्त करने का सबसे आसान तरीका इस प्रकार है:

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

चयनकर्ता के बीच कोई जगह नहीं उपयोग की जानी चाहिए।


<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

यह वापस आ जाएगा, रेडियो बटन मूल्य की जांच की।

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

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

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

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

radios.filter(":checked");

या

एक और तरीका आप रेडियो बटन मान पा सकते हैं

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`

यहां 2 रेडियो बटन हैं अर्थात् rd1 और रेडियो 1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

यह जांचने का सबसे आसान तरीका है कि कौन सा रेडियो बटन चेक किया गया है, व्यक्तिगत जांच करके (": चेक") संपत्ति है

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

इसे डीओएम तैयार फ़ंक्शन ( $(function(){...}); में लपेटें $(function(){...}); या $(document).ready(function(){...}); )।


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

चयनित रेडियो बटन का मान प्राप्त करने के लिए, इसे नाम से :checked करें :checked फ़िल्टर के साथ।

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

संपादित करें

तो आपके नाम पर कोई नियंत्रण नहीं है। उस मामले में मैं कहूंगा कि इन रेडियो बटनों को एक div के नाम पर रखें, नाम दें, radioDiv , फिर अपने चयनकर्ता को थोड़ा संशोधित करें:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

चयनित रेडियो बटन का मूल्य प्राप्त करने के लिए, रेडियोबटन नाम और रेडियोबटन युक्त फॉर्म आईडी का उपयोग करें।

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

या केवल द्वारा

$('form input[type=radio]:checked').val();

अलग-अलग वर्गों से जुड़े रेडियो समूहों के संग्रह के साथ काम करने के उदाहरण के लिए नीचे देखें। आपकी नामकरण योजना महत्वपूर्ण है, लेकिन आदर्श रूप से आपको इनपुट के लिए एक सतत नामकरण योजना का प्रयास करना चाहिए और विशेष रूप से जब वे यहां अनुभागों में हैं)।

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>


मैं जावास्क्रिप्ट व्यक्ति नहीं हूं, लेकिन मुझे इस समस्या को खोजने के लिए यहां मिला। किसके लिए यह Google है और यहां खोजें, मैं उम्मीद कर रहा हूं कि इससे कुछ मदद मिलती है। इसलिए, जैसा कि सवाल है कि हमारे पास रेडियो बटन की एक सूची है:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

मैं यह चुन सकता हूं कि इस चयनकर्ता के साथ कौन सा चुना गया है:

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

यहां तक ​​कि यदि कोई तत्व नहीं चुना गया है, तो भी मुझे अपरिभाषित त्रुटि नहीं मिलती है। इसलिए, तत्व के मूल्य लेने से पहले आपको अतिरिक्त विवरण लिखना नहीं है।

यहां बहुत बुनियादी jsfiddle उदाहरण है


समझने का एक और आसान तरीका ... यह काम कर रहा है:

HTML कोड:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery कोड:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

  1. आपके कोड में, jQuery सिर्फ q.1_3 नाम के साथ इनपुट के पहले उदाहरण की तलाश करता है, जिसमें इस मामले में 1 का मान होता है। आप नाम q12_3 के साथ एक इनपुट चाहते हैं जो है :checked
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. ध्यान दें कि उपरोक्त कोड .is(":checked") का उपयोग करने जैसा नहीं है। jQuery का is() फ़ंक्शन एक बुलियन (सत्य या गलत) देता है और तत्व नहीं।

<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

और वें ई मान सेट के रूप में चेतावनी के लिए jquery संभाल / div आईडी के माध्यम से बदल दिया:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

यह कितना आसान है....:-}


उदाहरण की जांच करें कि यह ठीक काम करता है

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();


उदाहरण के साथ इसे आजमाएं

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



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>




siebel