JQWidgets jqxRadioButtonGroup val() Method - Coding

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>

Output:

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

Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQWidgets jqxRadioButtonGroup enable() Method
jQWidgets jqxRadioButtonGroup render() Method
jQWidgets jqxRadioButtonGroup destroy() Method
jQWidgets jqxRadioButtonGroup disable() Method
jQWidgets jqxChart showToolTip() Method

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