尝试几次后获取所选项目失败

Question

我有一个单选按钮组，其中每个按钮都有相关联的下拉列表。选择其中一个列表后，我希望选择与所选列表关联的单选按钮。我有这个工作，但在第二次或第三次选择后，它停止工作。我正在使用的代码如下。有人可以看看吗？

$(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>

Answer 1

如果您先取消选中其他框，这会起作用；

 $(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);
   });
 });

如评论中所述，这也可以用 prop 替换 attr；

 $(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

jquery

select

radio