Getting selected item fails after a few tries

Question

I have a radio group with dropdown lists associated with each button. When one of the lists is selected, I want the radio button associated with the selected list to be selected. I have this working but after the second or third selection, it stops working. The code I am using is below. Would someone please take a look?

$(function() {
  $(".by_email").change(function() {
    $('input:radio[name="group1"][value="By Email"]').attr('checked', true);
  });
  $(".by_id").change(function() {
    $('input:radio[name="group1"][value="By ID"]').attr('checked', true);
  });
  $(".by_name").change(function() {
    $('input:radio[name="group1"][value="By Name"]').attr('checked', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div style="display:inline-block"><input type="radio" name="group1" id="by_email" value="By Email">By Email:</div>
  <div style="display:inline-block">
    <select class="by_email">
                <option>choose email</option>
                <option>me.com</option>
                <option>you.com</option>
            </select>
  </div>
  <div style="display:inline-block">
    <select class="by_email">
                <option>choose next email</option>
                <option>us.com</option>
                <option>them.com</option>
            </select>
  </div>
</div>
<div>
  <div style="display:inline-block"><input type="radio" name="group1" id="by_id" value="By ID" checked=checked>By ID:</div>
  <div style="display:inline-block">
    <select class="by_id">
                <option>choose id</option>
                <option>1</option>
                <option>2</option>
            </select>
  </div>
  <div style="display:inline-block">
    <select class="by_id">
                <option>choose next id</option>
                <option>11</option>
                <option>22</option>
            </select>
  </div>
</div>

<div>
  <div style="display:inline-block"><input type="radio" name="group1" id="by_name" value="By Name">By Name:</div>
  <div style="display:inline-block">
    <select class="by_name">
                <option>choose name</option>
                <option>bob</option>
                <option>sally</option>
            </select>
  </div>
  <div style="display:inline-block">
    <select class="by_name">
                <option>choose next name</option>
                <option>emma</option>
                <option>fred</option>
            </select>
  </div>
</div>

Use `.prop` rather than `.attr`. https://stackoverflow.com/questions/5874652/prop-vs-attr — Barmar, Feb 17 '18 at 14:59

score 2 · Accepted Answer · answered Feb 17 '18 at 14:58

If you first uncheck the other boxes this works;

 $(function () {
   $(".by_email").change(function () {
     $('input:radio[name="group1"]').attr('checked', false);
     $('input:radio[name="group1"][value="By Email"]').attr('checked', true);
   });
   $(".by_id").change(function () {
     $('input:radio[name="group1"]').attr('checked', false);
     $('input:radio[name="group1"][value="By ID"]').attr('checked', true);
   });
   $(".by_name").change(function () {
     $('input:radio[name="group1"]').attr('checked', false);
     $('input:radio[name="group1"][value="By Name"]').attr('checked', true);
   });
 });

As noted in the comments this will also work replacing attr with prop;

 $(function () {
   $(".by_email").change(function () {
     $('input:radio[name="group1"][value="By Email"]').prop('checked', true);
   });
   $(".by_id").change(function () {
     $('input:radio[name="group1"][value="By ID"]').prop('checked', true);
   });
   $(".by_name").change(function () {
     $('input:radio[name="group1"][value="By Name"]').prop('checked', true);
   });
 });

Getting selected item fails after a few tries

1 Answers1