我有一个问题应用程序...每个问题有 4 个选项... 在每个问题中选择一个选项时，我需要取消选中其他选项... 请帮帮我，我没有时间... 此脚本更改所有问题选项取消选中...
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="/Content/TemplateExam/assets/bootstrap/css/bootstrap.min.css?h=fe7fdfec700d100dc745dc64d3600cb2">
<link rel="stylesheet" href="/Content/TemplateExam/assets/css/styles.min.css?h=d5d4a12a0f08968858f8860faa01866f">
</head>
<body style="/*background-color: #9dffa1;*/">
<div class="justify-content-end text-end disabled"></div>
<form method="post" action="">
@foreach (var item in Questions)
{
<div class="question" id="@item.QuestionID">
<!-- Start: List Group With Checkboxes -->
<legend dir="rtl">@item.QuestionText</legend>
<ul class="list-group" style="direction: rtl;margin-left: 2rem;">
<li class="list-group-item" style="background: linear-gradient(to right, #009e49 0%, #efea07 100%);">
<div class="form-check">
<input value="@item.QuestionID" name="QuestionID" hidden />
<label><input type="radio" id="@($"Option1_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option1" class="answer" name="Options">@item.Option1</label>
<label><input type="radio" id="@($"Option2_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option2" class="answer" name="Options">@item.Option2</label>
<label><input type="radio" id="@($"Option3_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option3" class="answer" name="Options">@item.Option3</label>
<label><input type="radio" id="@($"Option4_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option4" class="answer" name="Options">@item.Option4</label>
</div>
</li>
</ul>
<!-- End: List Group With Checkboxes -->
</div>
<br />
}
<button type="submit" class="text-center">اتمام آزمون</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('.answer').change(function () {
var questionID = $(this).data('question-id');
$('input[type=radio][data-question-id="' + questionID + '"]').not(this).prop('checked', false);
});
});
</script>
</body>
</html>
据我了解这个问题，并且从您的代码中可以看到，问题是每个问题都有单选按钮，并且它们在输入元素的 name 属性中都具有相同的值（
name="Options"单选按钮按名称分组，每组中只能选择一个单选按钮。为每个问题的单选按钮指定一个唯一的名称，例如
name="question_1"fieldset {
display: flex;
flex-direction: column;
}<form name="form01">
<fieldset>
<legend>Question 1?</legend>
<label><input type="radio" value="1" name="question_1">Option 1</label>
<label><input type="radio" value="2" name="question_1">Option 2</label>
<label><input type="radio" value="3" name="question_1">Option 3</label>
</fieldset>
<fieldset>
<legend>Question 2?</legend>
<label><input type="radio" value="1" name="question_2">Option 1</label>
<label><input type="radio" value="2" name="question_2">Option 2</label>
<label><input type="radio" value="3" name="question_2">Option 3</label>
</fieldset>
<fieldset>
<legend>Question 3?</legend>
<label><input type="radio" value="1" name="question_3">Option 1</label>
<label><input type="radio" value="2" name="question_3">Option 2</label>
<label><input type="radio" value="3" name="question_3">Option 3</label>
</fieldset>
</form>