Detailed explanation of examples of obtaining, assigning, and registering events for radio values ​​in HTML

This article mainly introduces the acquisition, assignment and registration events of radio values ​​​​in HTML. It is very suitable for novice friends. Friends who like HTML should not miss it. 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:

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

It can be easily done using jquery. First select the group and then filter out the checked ones, as follows:

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:

The code is as follows:

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

4, to select a radio node

Remove the checked attribute:

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 selected event

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

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, the function will be triggered.

For more detailed explanations of the acquisition, assignment, and registration event examples of radio values ​​​​in HTML, please pay attention to the PHP Chinese website for related articles!