jQWidgets jqxRadioButtonGroup val() Method

Last Updated : 03 Feb, 2023

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

The val() method is used to set or return the value of the displayed jqxRadioButtonGroup. It has no parameters, and it does not return anything.

Syntax:

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

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 val() 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 val() 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 v = 
                            $('.jqxradiobuttongroup').jqxRadioButton('val'); 
                        $('#log').text(v); 
                    }); 
            });     
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxRadioButtonGroup val() 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 val() 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 v = $('.jqxradiobuttongroup').jqxRadioButton('val'); 
                        if (v === null) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("Not null!"); 
                        } 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>