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

Vue uses canvas to realize image compression upload

This article shares the specific code of Vue usin...

Detailed tutorial on installation and configuration of MySql 5.7.17 winx64

1. Download the software 1. Go to the MySQL offic...

MySQL 5.7.19 winx64 free installation version configuration tutorial

mysql-5.7.19-winx64 installation-free version con...

How to install kibana tokenizer inside docker container

step: 1. Create a new docker-compose.yml file in ...

Summary of principles for writing HTML pages for emails

Since HTML email is not an independent HOST page o...

How to implement adaptive container with equal aspect ratio using CSS

When developing a mobile page recently, I encount...

Introduction to new features of ECMAscript

Table of contents 1. Default values ​​for functio...

Several principles for website product design reference

The following analysis is about product design pr...

Summary of HTML Hack Tags in IE Browser

Copy code The code is as follows: <!--[if !IE]...

Mysql tree-structured database table design

Table of contents Preface 1. Basic Data 2. Inheri...

How to write object and param to play flash in firefox

Copy code The code is as follows: <object clas...

Detailed explanation of three methods of JS interception string

JS provides three methods for intercepting string...

The basic principles and detailed usage of viewport

1. Overview of viewport Mobile browsers usually r...