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

This article is to share with you about JavaScript how to achieve check box all or cancel the operation, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, say no more, follow the editor to have a look.

Realization idea

1. Get the general marquee and all small marquee element objects

2. The button controls the small button---bind the onclick click event to the check box, and the event handler---for loop iterates through all the small boxes, assigning the value of the---checked attribute-- to them.

3. Small buttons affect the total button---for loop binds click events to each small check box, and for loop checks whether all check boxes are selected for each click:

Set a variable flag to control the selected state of the general button. The initial value is true. For loop traverses to check the selected state of each small check box. As long as one is not selected, flag = false,break jumps out of the loop and no longer checks the following small check box state. Finally, the total button checked attribute value = flag

Note: in html, the state checked = "checked" is selected, but in js, the selected state---checked = true; unchecked state---checked = false

Suggestion: if you take the attribute value, you can print it on the console to see what the value is.

Code sample checkbox .box {width: 300px; margin: 100px auto;} thead {color: # fff; background-color: # 008dd0 } Sports running Rope skipping yoga swimming Riding var all = document.querySelector ('# cbAll') Var sports = document.querySelector ('# tb'). QuerySelectorAll ('input'); / / bind the click event all.onclick = function () {console.log (all.checked) to the select all button; for (var I = 0; I

< sports.length; i++) { sports[i].checked = all.checked; } } // 给每个小复选框绑定点击事件 for (var i = 0; i < sports.length; i++) { sports[i].onclick = function() { // 控制全选按钮是否选中 var flag = true; // 每次点击一个小框，都检查是否所有复选框都被选中 for (var i = 0; i < sports.length; i++) { if (!sports[i].checked) { flag = false; break; // 只要有一个小复选框没有被选中，全选按钮就没被选中，可跳出循环，下面小复选框不用再判断 } } all.checked = flag; } } 页面效果：

The above is how JavaScript can select or cancel all check boxes. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.