Creating Checkboxradio Widget


jquery ui - Creating Checkboxradio Widget:

Checkboxradio Widget:
enhances the checkbox and radio input elements to theme able buttons

Creating Checkboxradio Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Checkboxradio Demo</title>

2. Link the necessary jQueryUI libray files to the HTML document

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

3. Code the structure of the widget (i.e. HTML or markup):

To create a Checkboxradio widget; we need to create checkbox or radio input elements based on the requirement, with associated label element

Code for radio inputs:
<legend>Select Gender</legend>
<label for="rdbMale">Male</label>
<input type="radio" name="rdbGender" id="rdbMale" value="m" checked/>
<label for="rdbFemale">Female</label>
<input type="radio" name="rdbGender" id="rdbFemale" value="f"/>

Code for checkbox inputs:
<legend>Select Hobbies</legend>
<label for="chkMusic">Music</label>
<input type="checkbox" name="chkHobbies" id="chkMusic" value="m"/>
<label for="chkDrawing">Drawing</label>
<input type="checkbox" name="chkHobbies" id="chkDrawing" value="d"/>
<label for="chkGaming">Gaming</label>
<input type="checkbox" name="chkHobbies" id="chkGaming" value="g"/>

4. Select the element using jQuery and call the respective jQuery UI function on it

Select the element using jQuery selector, call checkboxradio jQuery UI function on it
<script type="text/javascript">

Interview Questions: