In this tutorial, we will learn JQuery UI Checkbox With Radio Button Example


A checkbox allows you to choose one or many options to be selected from a list of options.

Radio Button: 

A radio button is used when you want to select only one option out of several available options.

Example :

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>jQuery UI Checkboxradio Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
            margin:50px auto;
            border:2px solid #008B8B;
            padding:10px 10px 20px 10px;
            border:1px solid #008B8B !important;
            background:#008B8B !important;
        .ui-icon-background, .ui-state-active .ui-icon-background{

<h1>Checkbox and radio button widgets -</h1>
<div class="widget">
  <h2>Radio Group</h2>
    <legend>Select a Location: </legend>
    <label for="radio-1">New York</label>
    <input type="radio" name="radio-1" id="radio-1">
    <label for="radio-2">Paris</label>
    <input type="radio" name="radio-1" id="radio-2">
    <label for="radio-3">London</label>
    <input type="radio" name="radio-1" id="radio-3">
    <legend>Hotel Ratings: </legend>
    <label for="checkbox-1">2 Star</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="checkbox-2">3 Star</label>
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
    <label for="checkbox-3">4 Star</label>
    <input type="checkbox" name="checkbox-3" id="checkbox-3">
    <label for="checkbox-4">5 Star</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-4">
  <h2>Checkbox nested in label</h2>
    <legend>Bed Type: </legend>
    <label for="checkbox-nested-1">2 Double
      <input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
    <label for="checkbox-nested-2">2 Queen
      <input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
    <label for="checkbox-nested-3">1 Queen
      <input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
    <label for="checkbox-nested-4">1 King
      <input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
    $( function() {
        $( "input" ).checkboxradio();

May this example help you.