提问者:小点点

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


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

我有一些设想。

  1. 当用户选中第一个复选框时,第一个单选按钮将选中,如果取消选中该复选框,则单选按钮将取消选中。
  2. 如果用户直接选择单选按钮,则最近的复选框将选中。

上面的场景几乎是工作的,我得到的问题上的第二个复选框。

我选择第一个复选框,然后选择第一个单选按钮。 如果我选择了第二个勾选,那么单选按钮正在选择,但第一个单选按钮未选中。

null

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

null


共1个答案

匿名用户

所有name属性值相同的单选按钮都将属于同一单选组:如果其中一个按钮被选中,其他按钮将自动变为未选中。

下面,我简单地重命名了第二组中的单选按钮,以便将它们(及其链接的复选框)与第一组隔离开来。

(您可能还想重命名复选框,除非您有理由让它与第一个复选框共享一个名称。)

null

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