The final result

Realize the function

  1. Click Select all, select all the check boxes, select text becomes not select at all
  2. Click none, all check boxes are not selected at all, and text is not selected at all
  3. Check boxes can be clicked individually
  4. Click Uncheck to reverse the status of all check boxes
  5. If all check boxes are checked, all text becomes none
  6. If a check box is not selected, the text is not selected at all

The final code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Checkbox Select all/none/return</title>
        <style>
            body.dl.dt.dd.p {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: Tahoma;
                font-size: 12px;
            }
            label.input.a {
                vertical-align: middle;
            }
            label {
                padding: 0 10px 0 5px;
            }
            a {
                color: #09f;
                text-decoration: none;
            }
            a:hover {
                color: red;
            }
            dl {
                width: 120px;
                margin: 10px auto;
                padding: 10px 5px;
                border: 1px solid # 666;
                border-radius: 5px;
                background: #fafafa;
            }
            dt {
                padding-bottom: 10px;
                border-bottom: 1px solid # 666;
            }
            dt label {
                font-weight: 700;
            }
            p {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <dl>
            <dt>
                <input type="checkbox" id="checkAll" />
                <label>select all</label>
                <a href="javascript:;">The selected</a>
            </dt>
            <dd>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option (1)</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option (2)</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 3</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 4</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 5</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 6</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 7</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option 8</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option (9)</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>Option (10)</label>
                </p>
            </dd>
        </dl>
        <center>1, toggle full/no text;<br />
            <br />2. Update the status of the whole selection box according to the selected number;</center>
        <script src="demo.js"></script>
    </body>
</html>
Copy the code
window.onload = function(){
	// Select all, unselect, all check boxes
	var oSelectAll = document.querySelector("#checkAll");
	var oInvertSelect = document.querySelector("a");
	var aCheckbox = document.querySelectorAll('p>input');
	var oSelectAllLabel = document.querySelector('dt>label');
	// Select all button click events
	oSelectAll.onclick = function(){
		for(var i = 0; i<aCheckbox.length; i++){ aCheckbox[i].checked =this.checked;
		}
		isSelectAll();
	}


	for (var i = 0; i < aCheckbox.length; i++) {
		aCheckbox[i].onclick = isSelectAll;
	}


	// Check whether all check boxes are selected
	// If all are selected, tick the first check box and change the text to "none"
	// If not all, the first check box should not be selected, the text should be "all"
	function isSelectAll(){
		var count = 0;
		for (var i = 0; i < aCheckbox.length; i++) {
			if(aCheckbox[i].checked){ count++; }}if(count == aCheckbox.length){
			oSelectAll.checked = true;
			oSelectAllLabel.innerHTML = "None at all";
		}else{
			oSelectAll.checked = false;
			oSelectAllLabel.innerHTML = "Future generations"; }}// The status of all check boxes is reversed
	oInvertSelect.onclick = function(){
		for (var i = 0; i < aCheckbox.length; i++) {
			aCheckbox[i].checked = !aCheckbox[i].checked;
		}
		isSelectAll();
	}
}
Copy the code

Column map

  • Do special effects, learn JS
  • 01 hyperlink mouse move into change big change red, mouse remove restore
  • Move the mouse in, div becomes big and red, move the mouse out and return to its original appearance
  • [Do special effects, learn JS] — 03 web skin
  • Select all the check boxes
  • — 05 Check box All/None
  • — 06 Check box select all/none/reverse
  • — 07 Web TAB
  • — 08 countdown
  • [Do special effects, learn JS] — 09 Serious full selection and anti selection
  • 10. Automatically generate tables
  • 11 extra meal – magic regular expression
  • — 12 extra meals -DOM extension
  • 13. Extra meal – Talk about BOM