"JavaScript" counter +classlist use-pure JS case: Select all reverse Selection

These two days to do a full selection of anti-election cases, using a number of methods, just beginning to write the stumbling, listen to the teacher after explaining the idea, then to write it is very easy. In fact, it is a question of thinking when writing code. The first thing to do is to analyze the function, then step it up and not mix it up. The following methods for a more streamlined method, using the Classlist attribute, just beginning to write two methods are relatively primitive, so relatively complex, it is not put up.
Features of the case:
1, each list item Li can click Toggle Check and unchecked state;
2, the whole box can be clicked to toggle the selected and unchecked state, click on the selected, all list items Li is selected, when clicked unchecked, all list items are unchecked, as long as there is a list item Li is not selected, all the marquee switch to unchecked state;
3, anti-election, click on the reverse selection to toggle the status of the list item li;

Classlist

var a.className = "a h g m";IE8以下不兼容节点.classList  类数组,节点所有类名的集合["a","h","g","m"]a.classList.remove("a","h");//移除a和h.add() 新增类名.remove() 移除类名.toggle() 切换类名（有就加，没有就减）.contains()  判断是否包含某个类名

        var Oul = document.getElementById ("ul");        var Ali = oul.getelementsbytagname ("Li");        var oall = document.getElementById ("All");        var oreverse = document.getElementById ("reverse");        Length = Ali.length; Add a click event for each Li for (var i=0; i<length; i++) {Ali[i].onclick = function () {this.classlist                . Toggle ("checked");                Determine if Li is all selected var full = true; for (var j=0; j<length; J + +) {//If there is an unchecked Li if (!                        Ali[j].classlist.contains (' checked ')) {full = false;                    Break }}//Modify all marquee State oall.classlist[full?            "Add": "Remove"] ("on"); }}//For Select all Add click event Oall.onclick = function () {//Get all box state var bool = this.classlist.            Contains (' on ');         Determine whether to select or clear for (Var i=0; i<length; i++) according to the state       Ali[i].classlist[bool?            "Remove": "Add"] ("checked");        }//Change all marquee state This.classList.toggle ("on");                }//To add a click event for oreverse.onclick = function () {//per Li to take the reverse for (var i=0; i<length; i++) {            Ali[i].classlist.toggle ("checked");            }//Determine if Li is all selected var full = true; for (var j=0; j<length; J + +) {//If there is an unchecked Li if (!                    Ali[j].classlist.contains (' checked ')) {full = false;                Break }}//Modify all marquee State oall.classlist[full?        "Add": "Remove"] ("on"); }

Counter

var Oul = document.getElementById ("ul");        var Oli = document.getelementsbytagname ("Li");        var Length = oli.length;        var oall = document.getElementById ("All");        var oback = document.getElementById ("reverse");  var count = 0;                Current selection//Add click event for each Li for (var i = 0; i< Length; i++) {Oli[i].onclick = function () {                var non = this.classlist;                    /*if (Non.contains (' checked ')) {non.remove ("checked");                count--;                    }else{non.add ("checked");                count++; }*///Judging the current click Li is to remove the tick or add a tick, thereby corresponding to the change counter non.contains (' checked ')?                count--:count++;                Change the click of Li status Non.toggle ("checked"); Decide whether to select all, change the state oall.classlist[count = = = Length?            "Add": "Remove"] ("on"); }}//For Select all Add click event Oall.onclick = function () {var bool;//Determine the current select state, modify the value of the counter if (This.classList.contains (' on ')) {bool = false;            Count = 0;                }else{bool = true;            Count = Length; } for (var i =0; i<length; i++) {Oli[i].classlist[bool?            "Add": "Remove"] ("checked");        }//Change all marquee state This.classList.toggle ("on");            }//To add click event Oback.onclick = function () {//Modify counter value count = Length-count;            for (var i = 0; i<length; i++) {oli[i].classlist.toggle ("checked"); }//Decide whether to select all, change the state oall.classlist[count = = = Length?        "Add": "Remove"] ("on"); }

CheckBox

Radio box and check box, their personal selection, in JS is rendered in a Boolean way

• The marquee node. Checked Get a Boolean value
• The marquee node. checked = true; Change the marquee to a selected state
• Marquee node. checked = false; Change the marquee to an unchecked state

The checked property of this operation via JS does not affect the label properties of the node

"JavaScript" counter +classlist use-pure JS case: Select all reverse Selection