Get the value of selected radio buttons – jQuery

print
If you need to get the value of a selected radio button dynamically, to send for processing via an AJAX call for example, then the following is a great way to achieve this.

The general methodology is to give all of the radio options a generic class that can be used to trigger the onchange event. Then, grab the value of the radio button that has been selected and use it in your processing script.

In the below example, we use the “class” to define the group, the “name” to define what we are selecting, and the “value” to determine what is then sent to the processing script.

The radio buttons:

<div class="row">
  <div class="col-sm-6">
    Option 1
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option1" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option1" value="hide">Hide
      </label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    Option 2
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option2" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option2" value="hide">Hide
      </label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    Option 3
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option3" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option3" value="hide">Hide
      </label>
    </div>
  </div>
</div>

There’s a lot of Bootstrap 4 formatting in there as well, as this was taken from one of my live projects.  I have also used the values “show” and “hide”, as these are project specific, but you could add any values you require in here.

Then some JavaScript to do the actual work:

$(".viewChange").on("change", function(e){

    e.preventDefault();

    const option1status = $("input[name='option1']:checked").val();
    const option2status = $("input[name='option2']:checked").val();
    const option3status = $("input[name='option3']:checked").val();

    /*
    Do something with your now created constants
    */

});

 

This will produce the outputs you need to then do processing as you require.

Share this post:
Related Posts
Create a character countdown for text inputs and textarea’s using jQuery
Get the values of an array of radio buttons – jQuery

Leave a Comment