jQWidgets Forums

Tagged: jqxRadioButton

This topic contains 2 replies, has 2 voices, and was last updated by rskbuvan 11 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Radio Button Group | Get Value Posts

June 20, 2013 at 9:18 am Radio Button Group | Get Value #23485

rskbuvan

Spectator

Hi,

I want to get the checked radio button value from a radio button group.

For example:

<label title="Date Format">Date Format:</label>
<div name="date_frmt" value="ddmmyyy" class="dateFrmt_radioBtn">dd-mm-yyyy</div>
<div name="date_frmt" value="mmddyyyy" class="dateFrmt_radioBtn">mm-dd-yyyy</div>

From the above example, I’ve 2 radio buttons grouped using the class name with the following logic,

$('.dateFrmt_radioBtn').each(function(){
		$(this).jqxRadioButton({ groupName: $(this).attr('name'), height: 25 });
});

Here, I can able to select one radio button at a time but how to get the selected radio button value. In my case, i need the values “ddmmyyyy” or “mmddyyyy“.

Can someone please help.

I look for a solution.

Thanks,
\_rssb

June 20, 2013 at 11:04 am Radio Button Group | Get Value #23492

Mariya

Participant

Hi rskbuvan,

Please take a look at the following 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/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.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/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#Button").jqxButton({ theme: theme });
            $('#Button').on('click', function () {
                var checked = $('#jqxRadioButton').jqxRadioButton('checked');
                var checked2 = $('#jqxRadioButton2').jqxRadioButton('checked');
                if (checked == true) {
                    alert("12 months is checked");
                }
                else if (checked2 == true) {
                    alert("6 months is checked");
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style='font-family: Verdana Arial; font-size: 12px; width: 400px;'>
        <h3>
            House Contract</h3>
        <div style='margin-top: 10px;' id='jqxRadioButton'>
            12 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2'>
            <span>6 Months Contract</span></div>
        <div style='margin-top: 10px;' id='Button'>
            <span>Click Me!</span></div>
    </div>
</body>
</html>

In the click event of the button you test whether the first radiobutton is checked or not by using the ‘checked’ property. If it is the alert is shown. The case for the next radiobutton is similar.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 7:17 am Radio Button Group | Get Value #23544

rskbuvan

Spectator

Hi Mariya,

Finally I came up with the solution similar to what you had suggested.

Thanks for the solution.

Cheers,
\_rssb

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.