jquery的checkboxradio（）不工作

Question

checkboxradio() jQuery無法正常工作。我嘗試了很多，但單選按鈕正在作爲簡單的html單選按鈕出現。

$("input[type='radio']").checkboxradio();

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<p style="width:50%;margin-left:25%">Add User</p> 
 

 
<div id="tab"> 
 
    <ul> 
 
    <li><a href="#tab-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tab-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tab-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 

 
    <div id="tab-1"> 
 

 
    <table id=" tab1_table" class="right"> 
 

 
     <tr> 
 
     <td> 
 
      <label for="username">UserName</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="username" id="username" value=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <label for="password">Enter Password</label> 
 
     </td> 
 
     <td> 
 
      <input type="password" name="password" id="password" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="password">Confirm Password</label> 
 
     </td> 
 
     <td> 
 
      <input type="password" name="confirmpassword" id="confirmpassword" value="" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div id="tab-2"> 
 

 
    <table id="tab2_table"> 
 

 
     <tr> 
 
     <td> 
 
      <label for="firstname">First Name</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="firstname" id="firstname" value=""> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="lastname">Last Name</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="lastname" id="lastname" value=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <label for="phoneNumber">Phone Number</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="phoneNumber" id="phoneNumber" value=""> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="aboutyou">Date Of Birth</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="dob" id="dob" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label>Gender :</label> 
 
     </td> 
 

 
     <td> 
 
      <label for="radio-1">Male</label> 
 
      <input type="radio" name="radio-1" id="radio-1"> 
 
     </td> 
 
     <td> 
 
      <label for="radio-2">Female</label> 
 
      <input type="radio" name="radio-1" id="radio-2"> 
 
     </td> 
 
     <td> 
 
      <label for="radio-3">Other</label> 
 
      <input type="radio" name="radio-1" id="radio-3"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div id="tab-3"> 
 
    <table id="tab3_table"> 
 
     <tr> 
 
     <td>Country:</td> 
 
     <td> 
 
      <select class="countryDropDown"> 
 
      <option value="">--Select Country--</option> 
 
      <option value="INDIA">India</option> 
 
      <option value="UK">UK</option> 
 
      <option value="USA">USA</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>State:</td> 
 
     <td> 
 
      <select class="stateDropDown"> 
 
      <option value="">--Select State--</option> 
 

 
      </select> 
 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="aboutyou">About You</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="aboutyou" id="resizable_aboutyou" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <center> 
 
      <input type="submit" name="submit" id="submit" value="Submit" /> 
 
      </center> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

你需要使用jQuery UI的版本1.12工作

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

工作代碼：

$("input[type='radio']").checkboxradio();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<p style="width:50%;margin-left:25%">Add User</p> 
 

 
<div id="tab"> 
 
    <ul> 
 
    <li><a href="#tab-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tab-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tab-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 

 
    <div id="tab-1"> 
 

 
    <table id=" tab1_table" class="right"> 
 

 
     <tr> 
 
     <td> 
 
      <label for="username">UserName</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="username" id="username" value=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <label for="password">Enter Password</label> 
 
     </td> 
 
     <td> 
 
      <input type="password" name="password" id="password" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="password">Confirm Password</label> 
 
     </td> 
 
     <td> 
 
      <input type="password" name="confirmpassword" id="confirmpassword" value="" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div id="tab-2"> 
 

 
    <table id="tab2_table"> 
 

 
     <tr> 
 
     <td> 
 
      <label for="firstname">First Name</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="firstname" id="firstname" value=""> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="lastname">Last Name</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="lastname" id="lastname" value=""> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <label for="phoneNumber">Phone Number</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="phoneNumber" id="phoneNumber" value=""> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="aboutyou">Date Of Birth</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="dob" id="dob" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label>Gender :</label> 
 
     </td> 
 

 
     <td> 
 
      <label for="radio-1">Male</label> 
 
      <input type="radio" name="radio-1" id="radio-1"> 
 
     </td> 
 
     <td> 
 
      <label for="radio-2">Female</label> 
 
      <input type="radio" name="radio-1" id="radio-2"> 
 
     </td> 
 
     <td> 
 
      <label for="radio-3">Other</label> 
 
      <input type="radio" name="radio-1" id="radio-3"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div id="tab-3"> 
 
    <table id="tab3_table"> 
 
     <tr> 
 
     <td>Country:</td> 
 
     <td> 
 
      <select class="countryDropDown"> 
 
      <option value="">--Select Country--</option> 
 
      <option value="INDIA">India</option> 
 
      <option value="UK">UK</option> 
 
      <option value="USA">USA</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>State:</td> 
 
     <td> 
 
      <select class="stateDropDown"> 
 
      <option value="">--Select State--</option> 
 

 
      </select> 
 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="aboutyou">About You</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="aboutyou" id="resizable_aboutyou" value="" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <center> 
 
      <input type="submit" name="submit" id="submit" value="Submit" /> 
 
      </center> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>