jQuery UI CheckboxRadio Widget - jQuery UI Tutorial 17

Показать описание

Notes for You:: jQuery UI CheckboxRadio Widget - jQuery UI Tutorial 17
- used to create theme able checkbox and radio buttons.

Creating CheckboxRadio Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Checkboxradio Demo</title>
</head>
<body>
</body>
</html>

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

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:
<fieldset>
<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"/>
</fieldset>

Code for checkbox inputs:
<fieldset>
<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"/>
</fieldset>

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">
$("input[type=radio]").checkboxradio();
</script>

<script type="text/javascript">
$("input[type=checkbox]").checkboxradio();
</script>

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:
jQuery UI Tutorial 18 - jQuery UI Button Tutorial

Follow the link for previous video:
jQuery UI Tutorial 16 - jQuery UI Dialog Tutorial

=========================================

jQuery UI Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

Bootstrap Tutorials Playlist:-

Dreamweaver Tutorials Playlist:-

PHP Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial