jquery的checkboxradio()不起作用

Question

checkboxradio() of 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版本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>

​