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

Tutorial on using hyperlink tags in XHTML

Hyperlink, also called "link". Hyperlin...

Vue Router loads different components according to background data

Table of contents Requirements encountered in act...

setup+ref+reactive implements vue3 responsiveness

Setup is used to write combined APIs. The interna...

Ideas and methods for incremental backup of MySQL database

To perform incremental backup of the MySQL databa...

Implementation example of specifying container ip when creating a container in docker

When Docker creates a container, it uses the brid...

Disable IE Image Toolbar

I just tried it on IE6, and it does show the toolb...

Common array operations in JavaScript

Table of contents 1. concat() 2. join() 3. push()...

Comprehensive understanding of html.css overflow

Comprehensive understanding of html.css overflow ...

Detailed graphic explanation of how to install and completely delete MySQL by decompression

1. Install MySQL (1) Unzip the downloaded MySQL c...

Complete example of Vue encapsulating the global toast component

Table of contents Preface 1. With vue-cli 1. Defi...

Vant Uploader implements the component of uploading one or more pictures

This article shares the Vant Uploader component f...

What is HTML?

History of HTML development: HTML means Hypertext...

Detailed explanation of the configuration method of Vue request interceptor

Follow the steps below 1. request.js content: htt...

Bootstrap 3.0 study notes page layout

This time we will mainly learn about layout, whic...

web.config (IIS) and .htaccess (Apache) configuration

xml <?xml version="1.0" encoding=&qu...