Blogs

With the jqxRadioButton, you can make a choice among a set of mutually exclusive, related options. You can choose one and only one option. By default, when you check the radio button, all other radio buttons within the same container become unchecked. jqxRadioButton has a feature which allows you to define groups of radio buttons within the same container and when you check a radio button from one group, all the buttons from the same group will be unchecked, but this will not change the states of the radio buttons from the other group or groups. The following HTML markup adds 6 radio buttons to your page. Note that they are within one DIV container.

  <div>
        <h3>
            Buttons</h3>
        <div style='margin-top: 10px;' id='jqxRadioButton'>
            Button</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2'>
            Toggle Button</div>
        <div style='margin-top: 10px;' id='jqxRadioButton3'>
            Repeat Button</div>
        <h3>
            Navigation</h3>
        <div style='margin-top: 10px;' id='jqxRadioButton4'>
            Menu</div>
        <div style='margin-top: 10px;' id='jqxRadioButton5'>
            Tabs</div>
        <div style='margin-top: 10px;' id='jqxRadioButton6'>
            Tree</div>    
    </div>

We initialize the buttons using the script below. If you don’t set the groupName property, checking a radio button will uncheck all other buttons.

        $("#jqxRadioButton").jqxRadioButton({ groupName: '1', width: 250, height: 25 });
        $("#jqxRadioButton2").jqxRadioButton({ groupName: '1', width: 250, height: 25 });
        $("#jqxRadioButton3").jqxRadioButton({ groupName: '1', width: 250, height: 25 });
        $("#jqxRadioButton4").jqxRadioButton({ groupName: '2', width: 250, height: 25 });
        $("#jqxRadioButton5").jqxRadioButton({ groupName: '2', width: 250, height: 25 });
        $("#jqxRadioButton6").jqxRadioButton({ groupName: '2', width: 250, height: 25 }); 

Here’s the result after checking the ‘Tabs’ and ‘Repeat Button’ radio buttons: Now let’s create the radio buttons without setting the groupName property.

        $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25 });
        $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25 });
        $("#jqxRadioButton3").jqxRadioButton({ width: 250, height: 25 });
        $("#jqxRadioButton4").jqxRadioButton({ width: 250, height: 25 });
        $("#jqxRadioButton5").jqxRadioButton({ width: 250, height: 25 });
        $("#jqxRadioButton6").jqxRadioButton({ width: 250, height: 25 });

After checking the ‘Tabs’ and ‘Repeat Button’ radio buttons, we get this: