javascript - 如何重置或取消选中同名单选按钮的值

Question

我正在尝试制作一个 MCQ 测验问题，每个问题有 4 个选项。我想为每个问题放置单独的重置按钮。当我单击重置按钮时，它会重置或取消选中所有单选按钮。如何重置相同组或名称的单选按钮？

<div class="col-lg-10 col-md-10 col-sm-9">
                        <div class="lms_service_detail">
                            <h3>An object is represented by two attributes, out of which one is characteristics and the other one is ___________.</h3>
                            <p><input name="1" id="Radio1" type="radio" value="A" /> Behaviour</p>
                            <p><input name="1" id="Radio2" type="radio" value="B" /> Situation</p>
                            <p><input name="1" id="Radio3" type="radio" value="C" /> Abstraction</p>
                            <p><input name="1" id="Radio4" type="radio" value="D" /> Encapsulation</p>
                            <p><input id="Submit1" type="submit" value="Reset" /></p>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-9">
                        <div class="lms_service_detail">
                            <h3>Name the programming technique that implements programs as an organized collection of interactive objects.</h3>
                            <p><input name="2" id="Radio5" type="radio" value="A" /> Procedural Programming</p>
                            <p><input name="2" id="Radio6" type="radio" value="B" /> Modular Programming</p>
                            <p><input name="2" id="Radio7" type="radio" value="C" /> Object-Oriented Programming</p>
                            <p><input name="2" id="Radio8" type="radio" value="D" /> None of these</p>
                            <p><input id="Submit2" type="submit" value="Reset" /></p>
                        </div>
                </div>

Answer 1

function onResetClick() {
    var $firstQuestion = document.querySelectorAll('input[name=1]');
    var $secondQuestion = document.querySelectorAll('input[name=2]');

    for (var i = 0; i < $firstQuestion.length; i++) {
        var $el = $firstQuestion;
        $el.setAttribute('checked', false);
    }

    for (i = 0; i < $secondQuestion.length; i++) {
        $el = $secondQuestion;
        $el.setAttribute('checked', false);
    }
}

绑定(bind)onResetClick方法会首先获取问题对应的所有输入。然后，我们迭代元素并将 setAttribute 检查为 false。不需要 jQuery。