javascript - 如何清除所有同名的单选按钮。我想将名称作为变量传递

Question

如何使用单击按钮清除所有具有相同名称的单选按钮。整个页面是由 php 动态生成的，所以我不能使用常量名称或 id，但名称和 id 可以通过获取按钮 id 来形成。我是 jquery 新手，今晚开始使用 jquery 工作，非常沮丧。

<div style="height: 425px">
            <!----------------------------------- Single Question Panel  Start ------------------------------------------->
            <div style="display: block" class="question" id="1">
                <div style="height: 405px;">
                    <p>
                        Q1. Who is current Prime Minister of India?
                    </p>

                    <div class="radio">
                        <label> <input type="radio" class="radio" name="q1" id="q1"
                                       value="male">Narendra Modi</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" class="radio" name="q1" id="q1" value="female">Arun
                            Jetli</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="q1" class="radio" id="q1" value="female">Manmohan
                            Singh</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="q1" class="radio" id="q1" value="female">LalKrishna Aadwani</label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" name="submit" id="mq1"
                            class="btn btn-info " disabled=disabled>Mark for Review
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="button" name="submit" id="fq1"
                            class="btn btn-success" disabled=disabled>Finalize
                    </button>
                    <!--   </div>
                           <div class="form-group">-->
                    <button type="button" name="clear" id="cq1"
                            class="btn btn-danger" disabled=disabled>Clear
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="button" name="submit" id="nq1" onclick="show_next('1')"
                            class="btn btn-primary">Next
                    </button>
                </div>
            </div>
            <!----------------------------------- Single Question Panel End    ------------------------------------------->

            <!----------------------------------- Single Question Panel  Start ------------------------------------------->
            <div style="display: none" class="question" id="2">
                <div style="height: 380px;">
                    <p>
                        Q2. Who is Second Prime Minister of India?
                    </p>

                    <div class="radio">
                        <label> <input type="radio" class="radio" name="q2" value="male">Narendra Modi</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="q2" value="female">Arun Jetli</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="q2" value="female">Manmohan Singh</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="q2" value="female">LalKrishna Aadwani</label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" name="mq2" id="mq2"
                            class="btn btn-info " disabled=disabled>Mark for Review
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="submit" name="fq2" id="fq2"
                            class="btn btn-success" disabled=disabled>Finalize
                    </button>
                    <!--   </div>
                           <div class="form-group">-->
                    <button type="submit" name="cq2" id="cq2"
                            class="btn btn-danger" disabled=disabled>Clear
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="button" name="submit" id="submit" onclick="show_next('2')"
                            class="btn btn-primary">Next
                    </button>
                </div>
            </div>
            <!----------------------------------- Single Question Panel End    ------------------------------------------->

            <!----------------------------------- Single Question Panel  Start ------------------------------------------->
            <div style="display: none" class="question" id="3">
                <div style="height: 380px;">
                    <p>
                        Q3. Who is Third Prime Minister of India?
                    </p>

                    <div class="radio">
                        <label> <input type="radio" class="radio r" name="q3" value="male">Narendra Modi</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="q3" value="female">Arun Jetli</label>
                    </div>
                    <div class="radio">
                        <label> <input type="radio" name="q3" value="female">Manmohan Singh</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="q3" value="female">LalKrishna Aadwani</label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" name="submit" id="submit"
                            class="btn btn-info " disabled=disabled>Mark for Review
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="button" name="fq3" id="fq3"
                            class="btn btn-success" disabled=disabled>Finalize
                    </button>
                    <!--   </div>
                           <div class="form-group">-->
                    <button type="button" name="cq3" id="cq3"
                            class="btn btn-danger" disabled=disabled>Clear
                    </button>
                    <!--</div>
                        <div class="form-group">-->
                    <button type="button" name="submit" id="submit" onclick="show_next('3')"
                            class="btn btn-primary">Next
                    </button>
                </div>
            </div>
            <!----------------------------------- Single Question Panel End    ------------------------------------------->
        </div>
    </div>

我想如果我能以某种方式将xyz作为变量传入，我就可以做到。我在stackoverflow上的其他答案中看到了这一点。

$('input[name=xyz]').attr('checked',false);

如果没有，怎么办。

Answer 1

您可以在重置按钮的data属性中传递单选按钮的名称

<button class="reset" data-name="q3">reset</button>

点击后会清除同名的单选按钮

DEMO

$('.reset').click(function() {
    var name = $(this).data('name');
    $('input[name=' + name + ']').prop('checked',false);
});