jQuery seçilen radyo düğmesinin değerini al

Sorun bildirimi basittir. Kullanıcının bir radyo grubundan bir radyo düğmesi seçip seçmediğini görmem gerekiyor. Gruptaki her radyo düğmesi aynı kimliği paylaşır.

Sorun, formun nasıl oluşturulduğunu denetlemememdir. Bir radyo düğmesi kontrol kodunun nasıl göründüğüne ilişkin örnek kod:

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

Buna ek olarak, bir radyo düğmesi adil metin kontrolüne özelliğini "işaretli" eklemez seçildiğinde kontrol (sadece bu tesiste değeri olmayan kontrol tahmin) . Aşağıda seçilen bir radyo kontrolünün nasıl göründüğü

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

Kontrol edilen radyo düğmesinin değerini almama yardımcı olabilecek jQuery koduyla kimse bana yardımcı olabilir mi?

Sadece kullan.

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

Çok kolay.

İlk olarak, aynı kimliğe sahip birden fazla öğeniz olamaz. Formun nasıl oluşturulacağını kontrol edemeyeceğinizi söylediğinizi biliyorum, ama ... bir şekilde tüm kimlikleri radyolardan kaldırmaya çalışın ya da benzersiz kılın.

Seçilen radyo düğmesinin değerini almak için :checkedfiltreden adıyla seçin .

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

DÜZENLE

Yani isimler üzerinde kontrolünüz yok. Bu durumda, bu radyo düğmelerini, adında, örneğin adında bir div içine koyun radioDiv, sonra seçicinizi biraz değiştirin:

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

Seçilen radyo düğmesinin değerini almanın en basit yolu aşağıdaki gibidir:

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

Seçici arasında boşluk olmamalıdır.

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

Bunu DOM için hazır işlevinde ( $(function(){...});veya $(document).ready(function(){...});) sarmayı unutmayın .

1. Kodunuzda, jQuery sadece bu durumda 1 değerine sahip olan q12_3 adında bir girdinin ilk örneğini arar :checked.

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

2. Yukarıdaki kodun kullanımla aynı olmadığını unutmayın .is(":checked"). jQuery is() işlevi bir öğe değil bir boole (doğru veya yanlış) döndürür.

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

Bu geri döner, işaretli radyo düğmesi değeri.

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

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

yuvalanmış özellikler için

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

İsim için tekli parantezleri unutmayın

Tüm radyoları alın:

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

İşaretli olanı almak için filtreleyin

radios.filter(":checked");

VEYA

Radyo düğmesi değerini bulmanın başka bir yolu

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

Seçilen Radyo Düğmesinin değerini almak için RadioButtonName ve RadioButton'u içeren Form Kimliği'ni kullanın.

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

VEYA sadece

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

İyi çalıştığı örneği kontrol edin

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

Her biri farklı bölümlerle ilişkili radyo gruplarının bir koleksiyonuyla çalışma örneği için aşağıya bakın. Adlandırma düzeniniz önemlidir, ancak ideal olarak girdiler için tutarlı bir adlandırma düzeni kullanmayı denemelisiniz (özellikle de buradaki bölümlerde bulunduklarında).

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

Aşağıdaki Kodu Kullan

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

Sonuçta "Erkek" veya "Kadın" alabilmek için değer özelliğinin tanımlanması gerektiğini lütfen unutmayın.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

Bunu örnekle deneyin

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

Yalnızca İsme Göre

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

Javascript / jQuery'de bunu kullanarak Id ile seçilen radyo düğmesinin değerini alabilirsiniz.

$("#InvCopyRadio:checked").val();

Umarım bu yardımcı olacak.

Bu basit konuyu açıklamanın en iyi yolu basit örnek ve referans bağlantısı vermektir:

Aşağıdaki örnekte iki radyo düğmemiz var. Kullanıcı herhangi bir radyo düğmesini seçerse, seçilen radyo düğmesi değerini bir uyarı kutusunda görüntüleriz.

Html:

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

Bu kadar geç katıldığımı biliyorum. Ama bahsetmeye değer

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

Ve sonra bunu js'imde kontrol ettim. Gibi olabilir

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

'

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

ve div id ile değiştirilen / değiştirilen değer için uyarı için jquery işlemek:

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

bu çok kolay....:-}

Anlamanın kolay bir yolu ... Çalışıyor:

HTML Kodu:

 <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 Kodu:

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

çok gruplu radyo düğmesi diziye gizli değer

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

Ben bir javascript kişi değilim, ama burada bu sorunu aramak için bulundu. Kim google ve burada bulmak için, ben bu bazı yardımcı olur umuyorum. Yani, söz konusu olduğu gibi bir radyo düğmesi listemiz varsa:

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

Bu seçiciyle hangisinin seçildiğini bulabilirim:

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

Hiçbir öğe seçili olmasa bile, hala tanımsız hata almıyorum. Bu nedenle, elementin değerini almadan önce if ifadesi yazmanıza gerek yoktur.

İşte çok temel jsfiddle örneği .

İşte rd1 ve Radio1 olmak üzere 2 radyo düğmesi

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

Tek tek kontrol edilerek hangi radyo düğmesinin işaretlendiğini kontrol etmenin en basit yolu (": işaretli") özelliktir

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

inputDiğer cevapların önerdiği gibi bile gerekli değildir. Aşağıdaki kod da kullanılabilir:

var variable_name = $("[name='radio_name']: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());
      });
    });`

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

Özel adı bilmiyorsanız veya bir formdaki tüm radyo girişlerini kontrol etmek istiyorsanız, her radyo grubunun değerini yalnızca bir kez kontrol etmek için global bir var kullanabilirsiniz: ``

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`