JQuery UI Checkbox With Radio Button Example

Admin   Jquery   303  2021-03-14 03:50:06

Hi Guys,

In this example,I will learn you how to use checkbox and radio button widgets.you can easy to use JQuery UI Checkbox With Radio Button.

Checkbox : 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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<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 - NiceSnippets.com</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();





It will help you....