2017-09-22 190 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而不是此屬性選擇器的方式。

但是:您無法選擇所有單選按鈕。這是一個邏輯失敗。單選按鈕是按名稱對它們進行分組,併爲每組選擇一個。如果您想選擇全部(或提供選擇全部的機會),請使用複選框。