Melonico
2021-03-15
687
blog
原创

JavaScript——checkbox的全选，全不选与反选实现

@[TOC] 页面显示 在这里插入图片描述

功能分析

  1. 全选按钮可以选中所有的checkbox
  2. 全不选按钮可以取消所有的checkbox
  3. 反选按钮可以选中未选择的checkbox，并取消以选择的checkbox

实现

页面内容

css

table{
	border: 1px solid black;
	width: 500px;
	margin: auto;
}
td,th{
	text-align: center;
	border: 1px solid;
}
div{
	margin: auto;
    width: 500px;
}

html

<table>
	<tr>
		<th>check</th>
		<th>1</th>
		<th>2</th>
		<th>3</th>
	</tr>
    <tr>
    	<td><input type="checkbox" name="check"></td>
    	<td>1</td>
    	<td>1</td>
    	<td>1</td>
   	</tr>
    <tr>
    	<td><input type="checkbox" name="check"></td>
    	<td>2</td>
    	<td>2</td>
    	<td>2</td>
    </tr>
    <tr>
    	<td><input type="checkbox" name="check"></td>
    	<td>3</td>
    	<td>3</td>
    	<td>3</td>
    </tr>
</table>
<div>
	<input type="button" value="全选" id="all">
	<input type="button" value="全不选" id="none">
	<input type="button" value="反选" id="invert">
</div>

获取元素对象

var all = document.getElementById("all");
var none = document.getElementById("none");
var invert = document.getElementById("invert");
var checks = document.getElementsByName("check");

全选功能

绑定点击事件，当点击按钮后，遍历所有的checkbox，并将每个checkbox的checked属性设为true

all.onclick = function () {
	// 遍历checks
	for (var i = 0; i < checks.length; i++) {
		// 将checked属性设为true
		checks[i].checked = true;
	}
}

全不选功能

绑定点击事件，当点击按钮后，遍历所有的checkbox，并将每个checkbox的checked属性设为false

none.onclick = function () {
	// 遍历checks
	for (var i = 0; i < checks.length; i++) {
		// 将checked属性设为false
		checks[i].checked = false;
	}
}

反选功能

绑定点击事件，当点击按钮后，遍历所有的checkbox，并将每个checkbox的checked属性设为与当前相反的值

invert.onclick = function () {
	// 遍历checks
	for (var i = 0; i < checks.length; i++) {
		// 将checked属性取反
		checks[i].checked = !checks[i].checked;
	}
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid black;
            width: 500px;
            margin: auto;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin: auto;
            width: 500px;
        }
    </style>
</head>
<body>
        <table>
            <tr>
                <th>check</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="check"></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="check"></td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="check"></td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </table>
        <div>
            <input type="button" value="全选" id="all">
            <input type="button" value="全不选" id="none">
            <input type="button" value="反选" id="invert">
        </div>
<script>
    var all = document.getElementById("all");
    var none = document.getElementById("none");
    var invert = document.getElementById("invert");
    var checks = document.getElementsByName("check");

    all.onclick = function () {
        // 遍历checks
        for (var i = 0; i < checks.length; i++) {
            // 将checked属性设为true
            checks[i].checked = true;
        }
    }
    none.onclick = function () {
        // 遍历checks
        for (var i = 0; i < checks.length; i++) {
            // 将checked属性设为false
            checks[i].checked = false;
        }
    }
    invert.onclick = function () {
        // 遍历checks
        for (var i = 0; i < checks.length; i++) {
            // 将checked属性取反
            checks[i].checked = !checks[i].checked;
        }
    }
</script>
</body>
</html>
JavaScript
JavaScript案例
赞
  • 作者：Melonico
  • 发表时间：2021-03-15 17:41
  • 更新时间：2021-03-15 17:41

评论

暂无评论，快来发表第一个评论吧!
留言
TOP