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 jqxButtonGroup is used to illustrate a jQuery widget that generates a group of buttons that function like a normal button, radio buttons, or checkboxes.
The getSelection() method is used to return the index or indexes of the chosen button(s) from the displayed jqxButtonGroup. It has no parameter. It returns a number or an array of numbers.
Note:
- If the mode of selection is default then it returns undefined.
- If the mode of selection is radio then it returns the index of the selected button from the displayed jqxButtonGroup.
- If the mode of selection is a checkbox then it returns an array of the selected buttons from the displayed jqxButtonGroup.
Syntax:
var jqxButtonGroup = $('#Selector').jqxButtonGroup('getSelection');
Linked Files: Download https://www.jqwidgets.com/download/ from the given link. In the HTML file, locate the script files in the downloaded folder.
<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/jqxbuttons.js”></script>
The below example illustrates the jqxButtonGroup getSelection() method in jQWidgets.
Example:
<!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/jqxbuttons.js"></script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxButtonGroup getSelection() method</h3>
<br />
<div id="jqxBG">
<button style="padding: 6px 36px" id="l">
ON
</button>
<button style="padding: 6px 36px" id="c">
Radio_Button
</button>
<button style="padding: 6px 36px" id="r">
OFF
</button>
</div>
<div>
<input type="button" id="jqxBtn" style="margin-top: 25px" value="Click here" />
</div>
<div id="log"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxBtn").jqxButton({
width: "100px",
height: "30px",
});
$("#jqxBG").jqxButtonGroup({
mode: "radio",
});
$("#jqxBtn").on("click", function () {
var gs = $("#jqxBG").jqxButtonGroup("getSelection");
$("#log").text(
"Button with index " + gs + " is selected!"
);
});
});
</script>
</body>
</html>
|
Output: