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

Question

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

我有一些场景。

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

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

我 select 第一个复选框然后第一个单选按钮被选中。 如果我 select 进行第二次检查，则选择单选按钮，但未选中第一个单选。

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