2017-09-22 54 views
1

我不确定哪里出错了。写了一些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

我很困惑,你使用'$ .noConflict()',然后立即使用$? –

+0

我尝试使用jquery而不是$,但结果仍然相同 –

回答

0

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

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

但是:您无法选择所有单选按钮。这是一个逻辑失败。单选按钮是按名称对它们进行分组,并为每组选择一个。如果您想选择全部(或提供选择全部的机会),请使用复选框。

相关问题