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

Question

How to clear all radio button with same name using a button click. whole page is generated dynamically by php so i can't use constant name or id but name and id can formed by getting button id. I am new to jquery and started working tonight in jquery and very frustrated.

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

I think i can do if somehow i can pass the xyz as variable in. I saw this in other answers on stackoverflow.

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

if not , how can do.

Answer 1

You can pass name of the radio buttons in data attribute of the reset button

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

By the click, it will clear radio buttons which has the same name

DEMO

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