jQuery UI Checkboxradio Widget Last Updated : 02 Dec, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article jQuery UI Checkboxradio icon Option M mayeshmohapatra Follow Improve Article Tags : JQuery jQuery-UI Similar Reads jQuery UI Checkboxradio widget() Method jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether youâre building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a perfect choice. In this article, 1 min read EasyUI jQuery checkbox widget In this article, we will learn how to design a checkbox using jQuery EasyUI. The checkbox widget is used for selecting multiple choices. Each choice can be enabled by clicking on the boxes. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue tech 2 min read jQuery UI Checkboxradio Widget Complete Reference The jQuery UI Checkboxradio widget is used to add radio and checkbox into a themeable input on the website. There are lots of options, methods and events are available in this widget, all of them are listed and categorized below. jQuery UI Checkboxradio Widget Options: jQuery UI Checkboxradio classe 1 min read jQuery Mobile Checkboxradio Widget mini Option jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Checkboxradio Widget mini Option to display a more compact version of the checkboxradio that uses less vertical heig 1 min read jQuery UI Checkboxradio icon Option Checkboxradio Widget icon Option is used to show the checkbox or radio icon, depending on the input's type using jQuery UI. Syntax: $( ".selector" ).checkboxradio({ icon: false }); Approach: First, add jQuery UI scripts needed for your project. <link href="https://ajax.googleapis.com/ajax/libs/jq 1 min read jQuery UI Checkboxradio label Option Checkboxradio Widget label Option is used to show the label of an element using UI. When it is not specified, then the HTML content of the associated <label> element is used. Syntax: $( ".selector" ).checkboxradio({ label: "custom label" }); Approach: First, add jQuery UI scripts needed for yo 1 min read Like