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

This article mainly introduces the relevant knowledge of "how to achieve full selection of javascript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article of "how to achieve full selection of javascript" can help you solve the problem.

Javascript to achieve full selection methods: 1, through HTML and CSS to create a form; 2, use the DOM method to get full and single "input" elements; 3, set a variable isAllChecked;4, assign the value of isAllChecked to the select button.

This article operating environment: Windows7 system, javascript1.8.5 version, Dell G3 computer.

How does javascript achieve full selection?

Using JS to realize full selection and reverse selection of forms

This is also an exercise, that is, the general e-commerce shopping cart to select all, plus a reverse selection (it seems that there are not many shopping carts with anti-selection function, but windows Explorer has a reverse selection function)

Let's start with selecting all:

When all four lines of items are checked, "Select all" is automatically checked; when there are items that are not checked, "Select all" is automatically cancelled.

When the four lines of goods are not all checked, checking "Select all" allows all four lines of goods to be checked.

When "Select all" is checked, uncheck "Select all" and uncheck all items.

After sorting out the requirements, let's draw the form with HTML and CSS, with the code as follows:

Select all 2. Wrap {margin-left: 500px; margin-top: 200px;} table {border-collapse:collapse;} th {border:1px solid black; height: 45px;} td {border:1px solid black; text-align: center Font-weight: bold } iPhone X 8000 IPad air 2000

Here I have named the function of the mouse click event, all is called "funcAll ()", the radio is called "funcOne ()", and the reverse is called "funcBackward ()". The CSS part mainly adds a border to the form, while the border at the intersection is merged, which is basically the most simple look.

Let's start with articles 2 and 3. The logic is relatively simple:

Use the DOM method to get all-selected and single-selected "input" elements, only one, just use getElementById () (id has been set in advance), while there are four single-selection, use getElementByClassName () to get (class has been set in advance), of course, get an array.

Let's talk about assigning all acquired elements to variables, then iterating through the array with for, assigning the checked attribute of all selected variables to the checked attribute of each selected variable.

At this point, 2 and 3 have been solved at the same time, and the code is as follows:

Function funcAll () {var selectAll = document.getElementById ('selectAll'); var selectOnes = document.getElementsByClassName (' selectOne'); for (var I = 0; I < selectOnes.length; iTunes +) {/ / loop, assigning the value of all the boxes to each checkbox selectOnes [I] .boxes = selectAll.checked;}}

Next, rule 1: "when all four lines of items are checked, 'all' is automatically checked; when some items are not checked, 'all' is automatically canceled."

Here, the state of "Select all" is similar to listening for all other buttons, and once it changes, it changes accordingly. So this logic should be written to the mouse click event of each line of item radio button.

I set a variable isAllChecked as a bridge, and the initial state defines isAllChecked as true, and iterates through each radio button. Once I detect that a radio button is not checked, I set isAllChecked to false, jump out of the loop, and assign the value of isAllChecked to the select all button.

In this way, as long as a radio button is not selected, it will make all selections unchecked. The code is as follows:

Function funcOne () {var selectAll = document.getElementById ('selectAll'); / / function scope, so you have to define var selectOnes = document.getElementsByClassName (' selectOne'); var isAllChecked = true again / / define a variable as a bridge to control the full selection button for (var I = 0; I < selectOnes.length; iTunes +) {if (selectOnes [I]. Select = = false) {isAllChecked = false; break }} selectAll.checked = isAllChecked;} Let's talk about reverse election.

Click the reverse button, and the states of all radio buttons are reversed: those selected become unselected and those unselected become selected

Click on the reverse selection, resulting in the result, can still make all the selection in line with the previous logic.

The first item is actually very easy to implement. When you click the reverse button, you cycle through four radio buttons and invert the corresponding checked attribute of each element.

However, the full selection monitoring of all items we implemented earlier is actually implemented in the click event of each radio button, that is, if we do not change the state of the radio button by clicking the radio button, select all is actually unable to monitor the overall situation.

So, we can write the code for this part of the monitor into the mouse click function selected in reverse, and the final code is as follows:

Var selectAll = document.getElementById ('selectAll'); / / function scope, so you have to define var selectOnes = document.getElementsByClassName (' selectOne'); for (var I = 0; I < selectOnes.length; iChecked) {selectOnes [I] .isAllChecked =! selectOnes [I] .scope;} function funcOne () {}; var isAllChecked = true / / define a variable as a bridge to control the full selection button for (var I = 0; I < selectOnes.length; iTunes +) {if (selectOnes [I]. Select = = false) {isAllChecked = false; break }} selectAll.checked = isAllChecked;}

The final effect is as follows:

This is the end of the content about "how to achieve full selection of javascript". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.