JQuery Radio buttonRadio buttons are used where mutually exclusive options are given to user to select. class= 'radio-inline' can be used for showing horizontally ( in one line )
Reading the default or selected radio button value on page load.When no event is occurred we can read the selected radio button value like this.
Here we are displaying selected radio button value inside one div layer.
Getting selected radio button value using NAMEWe can read the user selected radio button value by using this in Jquery
When event is not associated with radio buttons
Above code will return the value associated with the selected radio button. So to execute this code we will use one click event so any radio button is clicked by the user this part of the code will be triggered.
The returned value will be displayed inside one div tag ( id=t1)
Event of Any radio button of pageIrrespective of id, name, class associated if any radio button on page is clicked or changed then this event will be executed.
Getting radio button nameSometime we are collecting records from database table and wants to give options to user to change one filed from True to False or vice versa
Based on the stored value of the record we will have one of the two radio button selected. Here once the user click one radio button, we need to know two variables. One is the record number and second is out of two which radio button is clicked ( True of False )
Here we will keep record number as name of the radio button ( for both radio buttons of each record ) and one radio button with value as True and other one value as False.
As mentioned in above code we can read the value , similarly here is the code to read the name of the radio button which is clicked.
Collecting custom data attributeIf there are several radio buttons on page with different class, id, value and name, we can get details of clicked radio button along with attributes for our processing. Here we have used one additional custom attribute ( allowed in HTML5 , name should start with string 'data-' )
We can use additional data attributes as per the format given in HTML5.
We can read the value of data attributes like this.
Resetting radio buttonsOnce the selection is done by the user we can reset the same selection ( no selection ), here is the code.
Check or Uncheck radio button
Enable or disable all Radio buttonsBy click event of a button we can enable or disable the group of radio buttons.
Enable or disable single Radio buttons
Disabling two radio buttons
Using above concepts we can enable or disable based on the selection of the user. Let us say user has to select one of the two options, programming or graphics design. Based on the selection or choice of the user we will enable or disable two matching options out of four given options.
If programming is slected by user then options of graphics design will be disabled.
Assigning Boolean value ( True or False ) by using value of radio buttonDirectly we can’t use radio button value to set any status to true of false as it is in the form of string. We can the set value of a variable to Boolean value ( true ) like the code below and then use the variable set any object to true . Here is to code to set the collapsible option of Jquery UI tab .
Checkboxradio JQuery UIWe can enhance these buttons by adding effects , user interactions and styles by using Checkboxradio UI.
Managing OPTGROUP attributesWe can make a group of options of a dropdown listbox by using click event of a radio button. Options are grouped under <OPTGROUP> tag.