jQuery UI Checkboxradio Widget

Last Updated : 02 Dec, 2021

The checkboxradio widget can be used to take input from the user. The major difference between the traditional checkboxradio button and the one in jQuery UI is the ease with which it can stylize the button. This widget allows working around that limitation by positioning the associated label on top of the hidden input and emulating the checkbox or radio element itself using an (optional) icon. Syntax:

javascript

$( "$selector" ).checkboxradio({
});

Attributes:

destroy: It is used to remove the checkboxradio functionality of jQuery UI and change it to standard checkbox without any styling.
disable: Disables the checkboxradio buttons.
enable: Enables the checkboxradio button if it has been previously disabled.
instance: Returns the checkbox's last instance object if there is no object selected, it returns undefined.
refresh: Used to refresh the appearance of the widget, useful after changing and applying different themes.
widget: Returns the complete checkboxradio as a jQuery widget object.

Example 1: Let us create a simple checkbox radio with a basic theme, Here is the code for this.

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css' 
          rel='stylesheet'>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
  </script>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <br>
        <h3>Radio Button</h3>
        <label for="radio-1">Tennis</label>
        <input type="radio" 
               name="radio-1" 
               id="radio-1"
               class='r2'>
        <br>
        <label for="radio-2">Badminton</label>
        <input type="radio" 
               name="radio-1"
               id="radio-2"
               class='r2'>
        <br>
        <label for="radio-3">Squash</label>
        <input type="radio"
               name="radio-1" 
               id="radio-3" 
               class='r2'>
        <br>
        <br>
        <br>

        <h3>Checkbox</h3>
        <label for="checkbox-1">Cricket</label>
        <input type="checkbox" 
               name="checkbox-1" 
               id="checkbox-1" 
               class='c2'>
        <br>
        <label for="checkbox-2">Football</label>
        <input type="checkbox"
               name="checkbox-2"
               id="checkbox-2" 
               class='c2'>

        <script>
            $(document).ready(function() {

                $(".r2, .c2").checkboxradio({});

            });
        </script>
  </center>
</body>

</html>

Output:

Applying a theme: The theme can be changed by changing the CSS file. Here, some predefined CSS files have been used in jQuery UI. The change in the CSS file being called inside the head tag. Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'
          rel='stylesheet'>
    <link rel='stylesheet'
          href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css'>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
  </script>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Radio Button</h3>
        <label for="radio-1">Tennis</label>
        <input type="radio" 
               name="radio-1"
               id="radio-1" 
               class='r2'>
        <br>
        <label for="radio-2">Badminton</label>
        <input type="radio" 
               name="radio-1" 
               id="radio-2"
               class='r2'>
        <br>
        <label for="radio-3">Squash</label>
        <input type="radio"
               name="radio-1" 
               id="radio-3" 
               class='r2'>
        <br>
        <h3>Checkbox</h3>
        <label for="checkbox-1">Cricket</label>
        <input type="checkbox" 
               name="checkbox-1" 
               id="checkbox-1"
               class='c2'>
        <br>
        <label for="checkbox-2">Football</label>
        <input type="checkbox" 
               name="checkbox-2" 
               id="checkbox-2" 
               class='c2'>

        <script>
            $(document).ready(function() {
                $(".r2, .c2").checkboxradio({});

            });
        </script>
    </center>
</body>

</html>

Note: In the above example r2 and c2 are the id's of the div tag. For applying it to a class add "$" before class name. Example: "$my_class" Here we have used the theme "le-frog". As it has been specified in this line.

<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css'>

Output:

jQuery UI Checkboxradio icon Option

mayeshmohapatra

Improve

Article Tags :

jQuery UI Checkboxradio Widget

Similar Reads

Thank You!

What kind of Experience do you want to share?