Detailed explanation of examples of obtaining, assigning, and registering events for radio values ​​in HTML_HTML/Xhtml_Web page production

1. Radio grouping

As long as the name is the same, it is a group, that is, only one can be selected in a group, as follows:

Copy code

The code is as follows:

<span>group1:</span>
<input type="radio" id="radio1" checked= "checked" name="group1" />radio1
<input type="radio" id="radio2" name="group1" />radio2
<input type="radio" id= "radio3" name="group1" />radio3

<span>group2:</span>
<input type="radio" id="radio4" checked="checked" name="group2" />radio4
<input type="radio" id="radio5" name="group2" />radio5
<input type="radio" id="radio6" name="group2" />radio6

The effect is as follows:


2. Get the selected radio node

Using jquery can be very easy To make it easier, first select the group, and then filter out the checked ones, as follows:

Copy the code

The code is as follows :

var group1 = $("[name='group1']").filter(":checked");
console.log(group1.attr("id")) ;

3, select a radio node

Use jquery to set the checked attribute:

Copy code

The code is as follows:

$("#radio2").attr("checked", "checked");

4, go Select a radio node

to remove the checked attribute:

Copy the code

The code is as follows:

$("#radio1").removeAttr("checked");

The result of this may be that none of the radios in the group is selected.

5. Register the select and deselect event

Or use jquery’s on function to register the change event, as follows:

Copy the code

The code is as follows:

$("[name='group1']").on("change",
function (e) {
console.log($(e.target).val());
}
);

In this way, as long as any one in group1 is selected, it will trigger function.