CODEWITHSUNDEEP
jqueryhtml
DasSaffe
DasSaffe

Reputation: 2198

Multiple radio-buttons (same name) processing in jquery

I have a setup like this here:

$(document).on("click", "#updateLocation", function() {
  $('.radio_btn').each(function(index) {
    console.log($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="progressForm">
  <input type="text" readonly="readonly" value="question 1">
  <label><input type="radio" name="isActive[1]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[1]" value="0" class="radio_btn">not yet done</label>

  <input type="text" readonly="readonly" value="question 2">
  <label><input type="radio" name="isActive[12]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[12]" value="0" class="radio_btn">not yet done</label>

  <input type="text" readonly="readonly" value="question 3">
  <label><input type="radio" name="isActive[35]" value="1" class="radio_btn">done</label>
  <label><input type="radio" name="isActive[35]" value="0" class="radio_btn">not yet done</label>

  <button type="button" id="updateLocation">Update</button>
</form>

As you can see, the name-attribute is is not following a certain pattern regarding the numerical indices. However, I have one radio-button for "OK" and for "NOT OK". Since they have the same name, it is only possible to check one of the options.

Now, I want to evaluate those values in jQuery.

As you might already see, this can't work, since it seems, the DOM is (as expected) overwriting former values. I need to process every checkbox, since both values are valid and need to be inserted in my DB.

How can I obtain the value (whether it is checked or not) from the radio-buttons?

Assumption

in my each-function, I should get the values 1, 0, 1. Maybe I'm just to blind seeing the solution, it looks very basic to me however.

Also, can I somehow get the index (1, 12, 35..) from the current iterated checkbox somehow?

Upvotes: 0

Views: 2119

Answers (1)

KAD
KAD

Reputation: 11122

Select the :checked radios to loop against and use substring to get the index:

$(document).on("click", "#updateLocation", function() {
    $('.radio_btn:checked').each(function(index) {
        var name = $(this).attr('name');
        console.log(name.substring(name.indexOf('[') + 1, name.length - 1));
        console.log($(this).val());
    });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="progressForm">
    <input type="text" readonly="readonly" value="question 1">
    <label><input type="radio" name="isActive[1]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[1]" value="0" class="radio_btn">not yet done</label>

    <input type="text" readonly="readonly" value="question 2">
    <label><input type="radio" name="isActive[12]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[12]" value="0" class="radio_btn">not yet done</label>

    <input type="text" readonly="readonly" value="question 3">
    <label><input type="radio" name="isActive[35]" value="1" class="radio_btn">done</label>
    <label><input type="radio" name="isActive[35]" value="0" class="radio_btn">not yet done</label>

     <button type="button" id="updateLocation">Update</button>
</form>

Upvotes: 1

Related Questions