JSFiddle - React, Tailwind, and code Playground

by pixelastic

HTML

<form id="myForm">
      <input name="data[Payment][value]" id="payment_1500" type="radio" value="1500" />
      <label for="payment_1500">1500</label><br />
      
      <input name="data[Payment][value]" id="payment_2000" type="radio" value="2000" />
      <label for="payment_2000">2000</label><br />
      
      <input name="data[Payment][value]" id="payment_5000" type="radio" value="5000" />
      <label for="payment_5000">5000</label><br />
      
      <button id="test">Select</button>
  </form>

JavaScript

$('#test').click(function() {
    // Method 1 : We find the checked radio button directly. Will not work in IE8
    var selected1 = $('#myForm input[name="data\\[Payment\\]\\[value\\]"]:checked');
    var value1 = selected1.val();
    console.log(value1);
    
    // Method 2 : We find all the radio buttons, then filter the checked one. Will work everywhere
    var selected2 = $('#myForm input[name="data\\[Payment\\]\\[value\\]"]').filter(':checked');
    var value2 = selected2.val();
    console.log(value2);
    
    
    return false;
});