jQuery – Hangi radyo düğmesinin seçildiğini nasıl bilebilirim?

Diyelim ki iki radyo düğmem var ve seçilenin değerini öğrenmek istiyorum. jQuery ile bu değeri nasıl alabilirim?

Tüm radyo düğmelerinin değerlerini isteseydim aşağıdaki yöntemi kullanabilirdim:

$("form :radio")

Peki hangisinin seçildiğini nasıl bilebilirim?

myForm id etiketine sahip olan bir formumuz varsa seçili öğenin değerini aşağıdaki gibi alabiliriz:

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

Örnek:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

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

Seçili radyo değiştiğinde bir işlem yapmak

Diyelim ki seçili radyonun değeri değiştiğinde bir işlem yaptırmak istiyoruz. Mesela konsola bir şey yazdıralım:

$('#my-radio-form').on('change', function() {
  console.log($('[type="radio"]:checked').val());
});

<form id="my-radio-form">
  <input type="radio" name="input-radio" value="a" />a
  <input type="radio" name="input-radio" value="b" />b
  <input type="radio" name="input-radio" value="c" />c
  <input type="radio" name="input-radio" value="d" />d
</form>

jQuery olmadan radyo düğmesinin değerini alma

Eğer jQuery kullanmak istemiyorsanız aşağıdaki çözümü deneyebilirsiniz:

const RADIO_NAME = "radioName";
const radios = Array.from(document.getElementsByName(RADIO_NAME));
const checkedRadio = radios.filter(e=>e.checked);