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>

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

1 个答案: