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

问题描述

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

我有一些场景。

当用户选择第一个复选框时，第一个单选框将被选中，如果您取消选中该复选框，则单选按钮将取消选中。
如果用户直接选择单选按钮，那么最近的复选框将被选中。

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

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

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

标签： javascripthtmljquery

解决方案

所有属性值相同的单选按钮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>

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

问题描述

解决方案

推荐阅读