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

vue.config.js packaging optimization configuration

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview: I drew lessons from several timetable s...

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

vue.config.js packaging optimization configuration

Detailed explanation of the difference between uniapp and vue

JavaScript to achieve the effect of clicking on the self-made menu

Linux uses dual network card bond and screwdriver interface

SQL implementation LeetCode (185. Top three highest salaries in the department)

HTML is something that web page creators must learn and master.

Summary of methods for creating, listing, and deleting Docker containers on Linux

When to use table and when to use CSS (experience sharing)

Detailed explanation of MySQL startup options and system variables examples

Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox

Recommend

An experienced person will show you how to develop a professional and standardized MySQL startup script

Analysis of the differences between Iframe and FRAME

Reasons why MySQL cancelled Query Cache

Detailed explanation of MySQL Workbench usage tutorial

Simple steps to encapsulate components in Vue projects

Invalid solution when defining multiple class attributes in HTML

How to deploy code-server using docker

Ubuntu basic settings: installation and use of openssh-server

Detailed explanation of Linux tee command usage

CSS3 uses the transition property to achieve transition effects

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Parsing Apache Avro Data in One Article

Detailed explanation of Nginx forwarding socket port configuration

Detailed explanation of the reasons why MySQL connections are hung

Vue implements page caching function