单击即可选择所有单选按钮

时间:2017-09-22 18:46:52

标签: javascript jquery

我不确定我哪里出错了。写了一些jQuery代码,用单击选择所有单选按钮。它正在另一个页面上工作但不在此页面上。我不确定为什么会这样?其他一切正常,但没有选择单选按钮

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!--This is Jquery to select the multiple radio button on click of button-->
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $.noConflict();
            $(document).ready(function () {
                $("#selectE").click(function () {
                    $('input:radio[class=enroll]').each(function () {
                        $(this).prop('checked', true);
                    });
                });
                $("#selectR").click(function () {
                    $('input:radio[class=reject]').each(function () {
                        $(this).prop('checked', true);
                    });
                });
            });
        </script>
        <script src="staff_js/adm_enrol.js"></script> 
        <style>
            fieldset {
                border:2px solid black;
                border-radius:10px;
                padding:12px;
                position:relative;
            }
            legend {
                background: #FF9;
                border: solid 1px black;
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
                padding: 1px;
                margin:0px;
                font-size:18px;
            }
            .btn1 {
                display: inline-block;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }
        </style>        
    </head>
    <body>
        <fieldset>
            <legend><i class="fa fa-search" aria-hidden="true"></i>&nbsp;Search</legend>
            <div class="row">
                <div class ="form-inline">
                    <div class="col-sm-4">
                        <label for="acad_period">Academic Year</label>&nbsp;&nbsp;
                        <select class="form-control input-sm"  name="acad_period" required>
                            <option value=""></option>
                            <?php
                            include 'functions.php';
                            acad_year();
                            ?>
                        </select>
                    </div>

                    <div class="col-sm-4">
                        <label for="stuclass">Class</label>&nbsp;&nbsp;
                        <select id = "stuclass" name="stuclass" class="form-control" required>
                            <option value="">Please select...</option>
                            <option value="13">XII</option>
                            <option value="12">XI</option>
                            <option value="11">X</option>
                            <option value="10">IX</option>
                            <option value="9">VIII</option>
                            <option value="8">VII</option>
                            <option value="7">VI</option>
                            <option value="6">V</option>
                            <option value="5">IV</option>
                            <option value="4">III</option>
                            <option value="3">II</option>
                            <option value="2">I</option>
                            <option value="1">KG/Prep</option>
                            <option value="Nurs">Nursery</option>
                        </select>
                    </div>

                    <div class="col-sm-4">
                        <label for="appstatus">Application Status</label>&nbsp;&nbsp;
                        <select id="appstatus" name="appstatus" class="form-control" required>
                            <option value="">Please select...</option>
                            <option value="N">New</option>
                            <option value="INTI">Invited for Interview</option>
                            <option value="INTE">Invited for Exam</option>
                        </select>
                    </div>

                </div>
            </div>

            <br>
            <div style="text-align:right"; class="col-sm-12">
                <button id="srch" name="adm_search" value="Search" class="btn btn-success" type="button"><span class="glyphicon glyphicon glyphicon-file"></span> Search</button>
                <button name="adm_cancel" value="Cancel" class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                <br>
            </div>
        </fieldset>


        <br>
        <table id="app_enrolment" class="table table-condensed table-hover table-responsive table-striped table-bordered">
            <tbody>
                <tr>
                    <th colspan="4" rowspan="1" style="vertical-align: top; width: 142x; text-align: left;"><i class="fa fa-th-list" aria-hidden="true"></i>&nbsp;Result</th>
                    <th style="vertical-align: top;text-align: center;">Decision</th>
                </tr>

                <tr>
                    <th style="vertical-align: top;text-align: center;">Student ID</th>
                    <th style="vertical-align: top; text-align: center;">Name</th>
                    <th style="vertical-align: top; text-align: center;">App.Status</th>
                    <th style="text-align: center;">App.Date</th>
                    <th style="vertical-align: top;">
                        <button name="app_eall" class="btn1 btn-info btn-md" value="Enroll All" id="selectE"><span class="glyphicon glyphicon-user"></span> Enroll All</button> 
                        <button name="app_rall" class="btn1 btn-info btn-md" value="Reject All" id="selectR"></td><span class="glyphicon glyphicon-remove"></span> Reject All</button>
                </tr>
            </tbody>
        </table>

    </body>

我无法发现用jQuery编写的任何错误。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

首先。您显示的代码中没有标签无线电元素。

表达式input:radio[class=enroll]是错误的。该属性称为className而不是class。但是你为什么用这种方式呢?只需使用一个点:input.enroll:radio而不是此属性选择器方式。

但是:您无法选择所有单选按钮。这是一个逻辑失败。单选按钮用于按名称分组,每组选择一个。如果您想选择全部(或给予选择全部的机会),请使用复选框。