JQWidgets jqxRadioButtonGroup destroy() Method - Coding

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxRadioButtonGroup widget is used to display a group of radio buttons that possesses API in order to modify them.

The destroy() method is used to destroy the displayed jqxRadioButtonGroup. It has no parameters, and it does not return anything.

Syntax:

$("#jqxRadioButtonGroup").jqxRadioButtonGroup('destroy');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jcustomize qx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css”>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobuttongroup.js”></script>

Example 1: The below example illustrates the jQWidgets jqxRadioButtonGroup destroy() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.energyblue.css"> 
    <script type="text/javascript"
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxbuttons.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxradiobuttongroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxRadioButtonGroup destroy() Method 
        </h3> 
  
        <h4>Choose the correct option:</h4> 
  
        <div class='jqxradiobuttongroup'> 
            GeeksforGeeks is a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Capgemni is not a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Microsoft is not a service oriented company. 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxradiobuttongroup").jqxRadioButton({ 
                    theme: 'energyblue', 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                    theme: 'energyblue', 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        $('.jqxradiobuttongroup').jqxRadioButton('destroy'); 
                        $('#log').text("Widget destroyed!"); 
                    }); 
            });     
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxRadioButtonGroup destroy() method in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.energyblue.css"> 
    <script type="text/javascript"
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxbuttons.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxradiobuttongroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxRadioButtonGroup destroy() Method 
        </h3> 
  
        <h4>Choose the correct option:</h4> 
  
        <div class='jqxradiobuttongroup'> 
            GeeksforGeeks is a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Capgemni is not a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Microsoft is not a service oriented company. 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxradiobuttongroup").jqxRadioButton({ 
                    theme: 'energyblue', 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                    theme: 'energyblue', 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        var d = $('.jqxradiobuttongroup').jqxRadioButton('destroy'); 
                        if (d === null) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("Not null!"); 
                        } 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxradiobuttongroup/jqxradiobuttongroup-api.htm?search=

Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQWidgets jqxRadioButtonGroup disable() Method
jQWidgets jqxChart showToolTip() Method
jQWidgets jqxChart saveAsPDF() Method
jQWidgets jqxChart hideToolTip() Method
jQWidgets jqxChart getItemsCount() Method

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12