选择第二个单选按钮时未选中第一个单选按钮

Question

我的页面上有复选框和单选按钮。

我有一些场景。

1. 当用户选择第一个复选框时，第一个单选框将被选中，如果您取消选中该复选框，则单选按钮将取消选中。

2. 如果用户直接选择单选按钮，那么最近的复选框将被选中。

上述情况几乎可以正常工作，我在第二个复选框上遇到了问题。

我选择第一个复选框，然后选择第一个单选按钮。如果我选择第二个检查，则单选按钮正在选择，但第一个单选未选中。

$("input[type='radio']").click(function() {

  $(this).closest('.reviewers-details').find('.selectRV').prop('checked', true);

});

$("input[type='checkbox']").click(function() {

  var checkbox = $(this).closest('.reviewers-details').find('.selectRV').prop('checked');

  if (checkbox == true) {

    // $(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', true);

    $(this).closest('.reviewers-details').find('input[type=radio]:first').prop('checked', true);

  } else if ($(this).prop("checked") == false) {

    $(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', false);

  }

});

<div class="reviewers-details d-table sectionHeading">

  <div class="d-table-cell">

    <input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">test

    <ul>

      <li>

        <input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">

        <label>abc</label>:

      </li>

      <li>

        <input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">

        <label>xyz</label>:

      </li>

    </ul>

  </div>

</div>

<div class="reviewers-details d-table sectionHeading">

  <div class="d-table-cell">

    <input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">demo

    <ul>

      <li>

        <input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">

        <label>abc</label>:

      </li>

      <li>

        <input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">

        <label>xyz</label>:

      </li>

    </ul>

  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

所有属性值相同的单选按钮name将属于同一个单选组：如果一个被选中，其他的将自动变为未选中。下面，我只是重命名了第二组中的单选按钮，以将它们（及其链接的复选框）与第一组隔离。（您可能还想重命名该复选框，除非您有理由让它与第一个复选框共享名称。）$("input[type='radio']").click(function() {&nbsp; $(this)&nbsp; &nbsp; .closest('.reviewers-details')&nbsp; &nbsp; .find('.selectRV')&nbsp; &nbsp; .prop('checked', true);});$("input[type='checkbox']").click(function() {&nbsp; var checkbox = $(this)&nbsp; &nbsp; .closest('.reviewers-details')&nbsp; &nbsp; .find('.selectRV')&nbsp; &nbsp; .prop('checked');&nbsp; if (checkbox == true) {&nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; .closest('.reviewers-details')&nbsp; &nbsp; &nbsp; .find('input[type=radio]:first')&nbsp; &nbsp; &nbsp; .prop('checked', true);&nbsp; }&nbsp; else if ($(this).prop("checked") == false) {&nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; .closest('.reviewers-details')&nbsp; &nbsp; &nbsp; .find('input[type=radio]')&nbsp; &nbsp; &nbsp; .prop('checked', false);&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="reviewers-details d-table sectionHeading">&nbsp; <div class="d-table-cell">&nbsp; &nbsp; <input type="checkbox"&nbsp; &nbsp; &nbsp; name="reviewerid[1]"&nbsp; &nbsp; &nbsp; class="revieweruser selectRV"&nbsp; &nbsp; &nbsp; value="1"&nbsp; &nbsp; />test&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="reviewer_timeslot[1]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="revieweruser"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="1"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label>abc</label>:&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="reviewer_timeslot[1]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="revieweruser"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="3"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label>xyz</label>:&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></div><div class="reviewers-details d-table sectionHeading">&nbsp; <div class="d-table-cell">&nbsp; &nbsp; <input type="checkbox"&nbsp; &nbsp; &nbsp; name="reviewerid[1]"&nbsp; &nbsp; &nbsp; class="revieweruser selectRV"&nbsp; &nbsp; &nbsp; value="1"&nbsp; &nbsp; />demo&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="reviewer_timeslot[2]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="revieweruser"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="1"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label>abc</label>:&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="reviewer_timeslot[2]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="revieweruser"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="3"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <label>xyz</label>:&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></div>