Shulou(Shulou.com)06/01 Report--

Editor to share with you how JS to achieve full selection form and cancel the full selection function, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The details are as follows

Achieve results:

Select all button: click the select all button, all the small buttons will be selected; click the select all button, and all buttons will be unchecked

Mini button: only if all are selected, the Select all button will be selected.

Analysis of ideas:

1. Select all and deselect all: let the checked property (selected state) of all the check boxes below follow the select all button

Use this.checked to get the status of the current check box. If it is true, it means it is selected. If it is false, it means it is not selected.

Note: the checked attribute of is a Boolean attribute, and the checked attribute specifies the elements that should be pre-selected when the page is loaded.

Inp [I]. Check = this.checked; equates the checked attribute value of all check boxes below to the checked value of the select all button, following the state of the select all button.

This.checked gets either true or false, and if it is true, assign true to the checked attribute of all the check boxes below.

If you want to select all and cancel all, the core idea is to assign this state to all the following check boxes in the current state of whether the select all button is selected or not

2. The following check boxes need to be all selected, and all the buttons above are selected: (if one of the small buttons in the check box below is not selected, then the full selection button is also not selected.) bind the click event to the following check box, each click to cycle to see if the following check box is not selected, if there is a check box that is not selected, the above selection is not selected.

3. You can set a variable to control whether the Select all button is selected or unselected. Var flag=true

Code:

Form Select all + deselect all * {margin:0;padding: 0;} table {width:500px; position:relative; margin:100px auto; border-collapse:collapse; border:1px solid # d7d7d7;} thead tr {background-color:#222; font-weight: 600; color:#e9e9e9 } tbody tr:hover {background: # F5F5F5;} table tr {text-align: center; height:30px } Commodity Price iPhone 11 5999.0 Glory 20 2299.0 iPhone XR 4499.0 / / 1 、 Select all and deselect all: let the checked attribute (selected state) of all the check boxes below follow the select all button to / / get the element Get the Select all button and the small check box below var cekall = document.getElementById ('cekall') Var inp = document.querySelector ('tbody'). GetElementsByTagName (' input'); / / register the event cekall.onclick = function () {/ / this.checked can get the current check box selected status, if it is true, it is selected, if it is false, it is not selected console.log (this.checked); for (var iTuno; I < inp.length; iboxes +) {inp [I] .check = this.checked }} / / 2. All the check boxes below must be selected before all the upper check boxes can be selected. Bind events to all the check boxes below. Every time you click, cycle through to see if all the check boxes below are selected or not. If there are unchecked check boxes, then the all select button above is not selected. For (var I = 0; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.