Get the values of an array of radio buttons – jQuery

print

Getting the value of a group of radio buttons is relatively straightforward, but what happens if you have more than one set?

I’ll start with a simple example of how to gather the data from a single set of radio buttons.

We’ll use this as our working example:

<div class="form-group">
  <div class="form-check form-check-inline">
    <input class="form-check-input checkMe" type="radio" name="amIChecked" value="yes">
    <label class="form-check-label" for="amIChecked">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input checkMe" type="radio" name="amIChecked" value="no">
    <label class="form-check-label" for="amIChecked">No</label>
  </div>
</div>

 

The jQuery to gather these fields would look something like this:

<script>
  jQuery(".checkMe").change(function(e) {
    e.preventDefault();
    const result = $("input[name='amIChecked']:checked").val();

    alert(result);

  })
</script>

In the above code, we are listening for a change event on the “checkMe” class.  At this point, we have asked the browser to provide the value of the input with the group name of “amIChecked”.

But what would happen if we were to produce a list, all ending in radio buttons?  If we adopted the above code, we would end up with only the result of the last set of radio buttons that the browser produced as it would keep re-attaching itself to the elements as they are rendered.  In this situation, we need to add something unique to each one.

I will assume at this point the list that your app is producing is being produced by a call to a database or similar.  If it isn’t and you just have a hard-coded list, this can still apply.

We need to take another approach to this to get this to fire correctly.  If you have been trying to do this with a similar method, then you will realise that applying the above method using a tweak of the above will produce hit and miss results.

The best way to approach this now is with a function.

Modified HTML:

<form id="{{ $thisRow->id }}">
  <div class="form-group"> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id="{{ $thisRow->id }}" name="amIChecked" onclick="clickedRadio('{{$rowID->id}}','yes')"> 
      <label class="form-check-label" for="amIChecked">Yes</label> 
    </div> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }}  name="amIChecked" onclick="clickedRadio('{{$rowID->id}}','no')"> 
      <label class="form-check-label" for="amIChecked">No</label> 
    </div> 
  </div>
</form>

I’m using the amazing Laravel framework in my project, so my ID is being produced in the Blade template using Laravels {{ }} syntax.  <?=$row->id;?> if you’re using vanilla PHP would be fine too.

You may notice I have also I have added <form> tags to each of the iterations in the loop.  This is because browsers will tend on only default the “checked” option (if you are using it) to the last iteration if everything has the same name value.  By adding <form> tags with a unique name, the browser treats all iterations as a single form.

Our function sends the row ID and the value to the jQuery for you to do with as you need.  With this in mind, there is no need to have the value=”” tags anymore, as they have been hardcoded in.

Now the modified jQuery:

<script> 
function clickedRadio(rowID, value)
    {
        alert(rowID + " : " + value);
     } 
</script>

With every click you should now get a row ID from your database (or whatever unique identifier you have chosen), and its value.  In this case, it will be yes or no, but it could be cats/dogs, on/off etc.

You aren’t limited to just two radio buttons using this method either.  This can be expanded to multiple values by just adding them in.

For example, this would be just as effective:

<form name="{{$rowID->id}}">
  <div class="form-group"> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }} name="userValue" onclick="clickedRadio('{{$rowID->id}}','1')"> 
      <label class="form-check-label" for="userValue">Yes</label> 
    </div> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }} name="userValue" onclick="clickedRadio('{{$rowID->id}}','2')"> 
      <label class="form-check-label" for="userValue">No</label> 
    </div>
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }} name="userValue" onclick="clickedRadio('{{$rowID->id}}','3')"> 
      <label class="form-check-label" for="userValue">No</label> 
    </div> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }} name="userValue" onclick="clickedRadio('{{$rowID->id}}','4')"> 
      <label class="form-check-label" for="userValue">No</label> 
    </div> 
    <div class="form-check form-check-inline"> 
      <input class="form-check-input checkMe" type="radio" id={{ $thisRow->id }} name="userValue" onclick="clickedRadio('{{$rowID->id}}','5')"> 
      <label class="form-check-label" for="userValue">No</label> 
    </div> 
  </div>
</form>

Have fun!

Share this post:
Related Posts
php-banner
Create a random string with PHP
Disable and enable buttons (Bootstrap) using a jQuery extension

Leave a Comment