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

Detailed explanation of obtaining, assigning, and registering radio values ​​in HTML
1. Radio grouping

As long as the name is the same, they are 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

This can be easily done using jQuery. First select the group, then filter out the checked ones, as follows:


Copy 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. Select a radio node

Remove the checked attribute:

Copy code
The code is as follows:

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

This may result in a situation where none of the radios in a group are selected.

5. Register the selected and unselected events

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

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

<<:  Perfect solution for theme switching based on Css Variable (recommended)

>>:  Tutorial on using $attrs and $listeners in Vue

Recommend

JavaScript to achieve JD.com flash sale effect

This article shares the specific code of JavaScri...

Use of environment variables in Docker and solutions to common problems

Preface Docker can configure environment variable...

Detailed explanation of monitoring Jenkins process based on zabbix

1. Monitoring architecture diagram 2. Implementat...

Summary of situations where MySQL indexes will not be used

Types of Indexes in MySQL Generally, they can be ...

Summary of common optimization operations of MySQL database (experience sharing)

Preface For a data-centric application, the quali...

Sample code for achieving small triangle border effect with pure CSS3+DIV

The specific code is as follows: The html code is...

Angular Cookie read and write operation code

Angular Cookie read and write operations, the cod...

Summary of commonly used CSS encapsulation methods

1. pc-reset PC style initialization /* normalize....

How to count the number of specific characters in a file in Linux

Counting the number of a string in a file is actu...

How to check if a table exists in MySQL and then delete it in batches

1. I searched for a long time on the Internet but...

Mysql backup multiple database code examples

This article mainly introduces the Mysql backup m...

Summary of MySQL InnoDB architecture

Table of contents introduction 1. Overall archite...

Security configuration and detection of SSL after the website enables https

It is standard for websites to enable SSL nowaday...

Introduction to the use of MySQL source command

Table of contents Thoughts triggered by an online...