UnCheck radio buttens by JQuery

hoopoe
March 28, 2024
144 views
0 votes
2 Answers

i have a Question application…each Questions have 4 options…
i need to Uncheck other options when select a option in each question…
please help me i have no time…
this script change all question options UnCheck…

<!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>

Answers

As I understand the issue and from what I can see in your code, the issue is that you have radio buttons for each question and they all have the same value in the name attribute of the input element (name="Options"). Therefor you can only select one option for all questions in the same form.

Radio buttons are grouped by their name and only one radio button can be selected in each group. Give the radion buttons for each question a unique name, like name="question_1" etc.

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>

If all radio buttons for different questions have the same name attribute (Options), then only one option can be selected across all questions because radio buttons with the same name attribute are treated as part of the same group, and only one option can be selected within a group.

To resolve this issue, you need to ensure that each group of radio buttons for each question has a unique name attribute. Typically, you would generate unique name attributes dynamically based on the question ID or another identifier.

@foreach (var item in Model)
{
    <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.QuestionID}")">@item.Option1</label>
                    <label><input type="radio" id="@($"Option2_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option2" class="answer" name="@($"Options_{item.QuestionID}")">@item.Option2</label>
                    <label><input type="radio" id="@($"Option3_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option3" class="answer" name="@($"Options_{item.QuestionID}")">@item.Option3</label>
                    <label><input type="radio" id="@($"Option4_{item.QuestionID}")" data-question-id="@item.QuestionID" value="@item.Option4" class="answer" name="@($"Options_{item.QuestionID}")">@item.Option4</label>
                </div>
            </li>
        </ul>
        <!-- End: List Group With Checkboxes -->
    </div>
    <br />
}

Please signup or login to give your own answer.

Click here to cancel reply.