jQWidgets jqxRadioButtonGroup rtl Property

Last Updated : 30 Jan, 2023

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 rtl property is used to set or return a value signifying if the elements of the stated jqxRadioButtonGroup are arranged in order to support locales utilizing the right-to-left fonts. It is of type Boolean and its default value is “false”.

Syntax:

Setting the rtl property.

$("#jqxRadioButtonGroup").jqxRadioButtonGroup({ rtl: true });

Returning the rtl property.

var rtl = $('#jqxRadioButtonGroup').jqxRadioButtonGroup('rtl');

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 rtl property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
    "jqwidgets/styles/jqx.base.css" type="text/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/jqx-all.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
  <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxRadioButtonGroup rtl Property 
    </h3> 
  
    <div id='jqxRadioButtonGroup'> 
        GeeksforGeeks 
    </div> 
  
    <input type="button" 
           id="btn" 
           value="Click Here" 
           style="padding: 5px 14px; margin-top: 15px;"> 
    <br> 
    <div id="log"></div> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxRadioButtonGroup").jqxRadioButton({ 
                rtl: true 
            }); 
  
            $('#btn').on('click', function () { 
                var r = $('#jqxRadioButtonGroup').jqxRadioButton('rtl'); 
                $('#log').text(r); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxRadioButtonGroup rtl property in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
    "jqwidgets/styles/jqx.base.css" type="text/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/jqx-all.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
  <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxRadioButtonGroup rtl Property 
    </h3> 
  
    <div id='jqxRadioButtonGroup'> 
        GeeksforGeeks 
    </div> 
  
    <input type="button" 
           id="btn" 
           value="Click Here" 
           style="padding: 5px 14px; margin-top: 15px;"> 
    <br> 
    <div id="log"></div> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxRadioButtonGroup").jqxRadioButton({ 
                rtl: false 
            }); 
  
            $('#btn').jqxButton(). 
                    click(function () { 
                        var r = $('#jqxRadioButtonGroup').jqxRadioButton('rtl'); 
                        if (r === false) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("Not null!"); 
                        } 
                    }); 
            }); 
    </script> 
</body> 
  
</html>