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

高洛峰
Release: 2017-03-03 16:07:09
Original
3281 people have browsed it

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:

group1: 
radio1 
radio2 
radio3 
group2: 
radio4 
radio5 
radio6
Copy after login


The effect is as follows:
Detailed explanation of examples of obtaining, assigning, and registering events for radio values ​​in HTML

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"));
Copy after login


3, select a radio node

Use jquery to set the checked attribute:

The code is as follows:

$("#radio2").attr("checked", "checked");
Copy after login


4, to select a radio node

Remove the checked attribute:

The code is as follows:

$("#radio1").removeAttr("checked");
Copy after login

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()); 
} 
);
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!