JQuery aracılığıyla hangi radyo düğmesinin seçildiğini nasıl bilebilirim?

İki radyo düğmem var ve seçilenin değerini göndermek istiyorum. JQuery ile değeri nasıl alabilirim?

Hepsini bu şekilde alabilirim:

$("form :radio")

Hangisinin seçildiğini nasıl bilebilirim?

Kimliğine sahip bir formun seçilen radioName öğesinin değerini almak için myForm:

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

İşte bir örnek:

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

Bunu kullan..

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

Bir radyo düğmesi grubuna zaten bir referansınız varsa, örneğin:

var myRadio = $("input[name=myRadio]");

filter()İşlevi kullanın , değil find(). ( find()alt öğe / alt öğe öğelerini bulmak içindir, oysa filter()seçiminizdeki üst düzey öğeleri arar.)

var checkedValue = myRadio.filter(":checked").val();

Notlar: Bu yanıt başlangıçta kullanılması önerilen find(), değiştirilmiş görünen başka bir yanıtı düzeltiyordu . find()zaten bir kapsayıcı öğeye zaten başvurduğunuz, ancak radyo düğmelerine referans vermediğiniz durumlarda yararlı olabilir, örn:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

Bu çalışmalı:

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

Girişin etrafında kullanılan "" notuna dikkat edin: Peter J'nin çözümü gibi değil ''

: İşaretli seçiciyi radyo seçiciyle birlikte kullanabilirsiniz.

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

Yalnızca boolean değerini istiyorsanız, yani işaretli veya işaretli değilse bunu deneyin:

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

Tüm radyoları alın:

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

Kontrol edileni almak için filtreleyin

radios.filter(":checked")

Başka bir seçenek:

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

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

Formu nasıl yazacağım ve kontrol edilen radyoyu nasıl ele alacağım.

MyForm adlı bir form kullanarak:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Değeri formdan alın:

$('#myForm .radio1:checked').val();

Formu göndermiyorsanız, şunu kullanarak daha da basitleştireceğim:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Sonra kontrol edilen değeri elde etmek:

    $('.radio1:checked').val();

Girişte bir sınıf adına sahip olmak, girişleri kolayca şekillendirmeme izin veriyor ...

Benim durumumda bir formda iki radyo düğmesi var ve her düğmenin durumunu bilmek istedim. Aşağıdaki benim için çalıştı:

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

Bir de JSF üretilen radyo düğmesi (kullanarak <h:selectOneRadio>etiketi), bunu yapabilirsiniz:

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

Burada selectOneRadio Kimliği radiobutton_id ve form kimliği form_id'dir .

JQuery bu özniteliği kullandığı için ad yerine id yerine ad kullandığınızdan emin olun ( ad , kontrol kimliğine benzeyen JSF tarafından otomatik olarak oluşturulur).

Ayrıca, kullanıcının hiçbir şey seçip seçmediğini kontrol edin.

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

Radyo düğmesi değerlerini ayarlamak ve almak için bir jQuery eklentisi yazdım. Ayrıca, üzerlerindeki "değişim" olayına da saygı gösterir.

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

Eklentiyi etkinleştirmek için kodu herhangi bir yere koyun. O zaman tadını çıkarın! Hiçbir şey bozmadan varsayılan val fonksiyonunu geçersiz kılar.

Bu jsFiddle'ı eylemde denemek ve nasıl çalıştığını görmek için ziyaret edebilirsiniz.

Vaktini boşa harcamak

Tek bir formda birden fazla radyo düğmeniz varsa

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

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

Bu benim için çalışıyor.

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

Bu iyi çalışıyor

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

Çalışma Demosu

:checkedSelektör için çalışır checkboxes, radio buttonsve öğeleri seçin. Yalnızca belirli öğeler için :selectedseçiciyi kullanın .

İçin API :checked Selector

Sınıf kullanan seçili radyonun değerini almak için:

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

Bu basit komut dosyasını kullanıyorum

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

Bunu kullan:

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

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

1 formda yalnızca 1 radyo düğmesi kümeniz varsa, jQuery kodu şu kadar basittir:

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

Bu konuda bir kütüphane yayınladım. Aslında tüm olası giriş değerlerini çeker, ancak hangi radyo düğmesinin kontrol edildiğini de içerir. Şuradan kontrol edebilirsiniz:Https://github.com/mazondo/formalizedata adresinden edebilirsiniz.

Size cevapların bir js nesnesi verecektir, bu yüzden şöyle bir form:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

sana vereceğim:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

JavaScript dizisindeki tüm radyo düğmesi değerlerini almak için aşağıdaki jQuery kodunu kullanın:

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

dene-

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

console.log(radioVal);

Formdaki tüm radyo düğmelerini ve kontrol edilen değeri almak için JQuery.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

Bunu almanın başka bir yolu:

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

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

Gönderen bu soruya , Şu anda seçili erişmek için alternatif yol ile geldi inputEğer bir süre varken click, ilgili etiket için olay. Bunun nedeni, yeni seçilenin tıklama etkinliğinden inputsonrasına kadar güncellenmemesidir label.

TL; DR

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

Yapmam gereken C # kodunu basitleştirmekti, bu da ön uç JavaScript'te mümkün olduğunca çok şey yapmaktı. Bir alan kümesi kapsayıcısı kullanıyorum çünkü DNN'de çalışıyorum ve kendi formu var. Bu yüzden bir form ekleyemiyorum.

Hangi metin kutusunun 3 kullanıldığını test etmem gerekiyor ve eğer varsa, arama türü nedir? Değeri ile başlar, Değeri içerir, Değerin Tam Eşleşmesi.

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>

Ve JavaScript'im:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Sadece kimliğine sahip herhangi bir etiketin söylenmesi kullanılabilir. DNNers için bunu bilmek iyidir. Buradaki son hedef, SQL Server'da parça araması başlatmak için gereken orta düzey koda geçmektir.

Bu şekilde çok daha karmaşık önceki C # kodunu da kopyalamak zorunda değilim. Ağır kaldırma burada yapılıyor.

Bunun için biraz bakmalıyım ve sonra işe yaraması için tamir etmeliydim. Yani diğer DNNers için, umarım bu bulmak kolaydır.