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

Running PostgreSQL in Docker and recommending several connection tools

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

Running PostgreSQL in Docker and recommending several connection tools

Historical Linux image processing and repair solutions

HTML meta viewport attribute detailed description

A brief discussion on the lazy loading attribute pattern in JavaScript

A brief discussion on the solution to the problem of native page compatibility with IE9

Analysis of 2 Token Reasons and Sample Code in Web Project Development

Import backup between mysql database and oracle database

Detailed process of installing Presto and connecting Hive in Docker

How to draw the timeline with vue+canvas

In-depth analysis of the Tomcat server of Centos 7 system

Recommend

JavaScript to achieve JD.com flash sale effect

Use of environment variables in Docker and solutions to common problems

Detailed explanation of monitoring Jenkins process based on zabbix

Summary of situations where MySQL indexes will not be used

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

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

Angular Cookie read and write operation code

Implementation of Docker configuration modification of Alibaba Cloud image repository

Summary of commonly used CSS encapsulation methods

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

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

Mysql backup multiple database code examples

Summary of MySQL InnoDB architecture

Security configuration and detection of SSL after the website enables https

Introduction to the use of MySQL source command