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

Question

我的页面上有复选框和单选按钮。我有一些场景。当用户选择第一个复选框时，第一个单选框将被选中，如果您取消选中该复选框，则单选按钮将取消选中。如果用户直接选择单选按钮，那么最近的复选框将被选中。上述情况几乎可以正常工作，我在第二个复选框上遇到了问题。我选择第一个复选框，然后选择第一个单选按钮。如果我选择第二个检查，则单选按钮正在选择，但第一个单选未选中。$("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() {

  $(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]:first')

      .prop('checked', true);

  }

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

    $(this)

      .closest('.reviewers-details')

      .find('input[type=radio]')

      .prop('checked', false);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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[2]"

          class="revieweruser"

          value="1"

        />

        <label>abc</label>:

      </li>

      <li>

        <input type="radio"

          name="reviewer_timeslot[2]"

          class="revieweruser"

          value="3"

        />

        <label>xyz</label>:

      </li>

    </ul>

  </div>

</div>