[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

php是最好的语言
Release: 2018-08-07 10:27:12
Original
1491 people have browsed it

Topic 1: Detecting user input:

##Topic requirements:

Write a user registration page

Check whether the username is less than 6 characters and whether the password is more than 8 characters. If the requirements are not met, highlight the text box;

The code is as follows:

    用户注册页面  


Copy after login

Topic 2: Setting the default style of the text box:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

#This sentence can set the default value of the text box;

The effect is:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

    设置文本框中的默认样式  
Copy after login

Topic 3: : Design a table style to realize the function of selecting all and inverting the selection

Function to be realized:


1 When clicking the select all button (parent's checkbox), keep the selected state of the child's checkbox consistent with the parent's checkbox

2 Register click events for all child's checkboxes, Click the child's checkbox. If one of the child's checkboxes is not selected, the parent's checkbox is also not selected

3 Inverse selection

Code example:

    全选反选  

商品 价钱
iPhone8 8000
iPad Pro 5000
iPad Air 2000
Apple Watch 2000

Copy after login

Web page example:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

Note: This sentence is the core. Let the status of the child's checkbox be equal to the parent'ssons [i].checked = this.checked;

Related recommendations:

How to select and invert all js checkboxes

js Implementation code for setting the style of the selected row

The above is the detailed content of [js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!