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

Detailed tutorial on installing the jenkins container in a docker environment

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

Detailed tutorial on installing the jenkins container in a docker environment

A brief discussion on the preliminary practice of Docker container interconnection

The complete version of the common Linux tool vi/vim

Summary of Vue's cross-domain problem handling and solutions

The most common mistakes in HTML tag writing

Example code for implementing a circular trajectory animation using CSS3 and table tags

VMware vSphere6.0 server virtualization deployment and installation diagram (detailed steps)

Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield

Detailed explanation of the implementation of shared modules in Angular projects

Understand the principles and applications of JSONP in one article

Recommend

UDP DUP timeout UPD port status detection code example

Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation

A small problem about null values in MySQL

Why should css be placed in the head tag

Vuex modularization and namespaced example demonstration

Solve the docker.socket permission problem of vscode docker plugin

Docker deployment MySQL8 cluster (one master and two slaves) implementation steps

Introduction to installing JDK under Linux, including uninstalling OpenJDK

Native javascript+CSS to achieve the effect of carousel

mysql8.0.20 download and installation and problems encountered (illustration and text)

Analyzing the four transaction isolation levels in MySQL through examples

MySQL index failure principle

CSS implements the web component function of sliding the message panel

Some common properties of CSS

Introduction to CSS foreground and background automatic color matching technology (demo)