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

文章目录

    • 功能分析
    • 实现
      • 页面内容
      • 获取元素对象
      • 全选功能
      • 全不选功能
      • 反选功能
    • 完整代码

页面显示
JavaScript——checkbox的全选,全不选与反选实现_第1张图片

功能分析

  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>checkth>
		<th>1th>
		<th>2th>
		<th>3th>
	tr>
    <tr>
    	<td><input type="checkbox" name="check">td>
    	<td>1td>
    	<td>1td>
    	<td>1td>
   	tr>
    <tr>
    	<td><input type="checkbox" name="check">td>
    	<td>2td>
    	<td>2td>
    	<td>2td>
    tr>
    <tr>
    	<td><input type="checkbox" name="check">td>
    	<td>3td>
    	<td>3td>
    	<td>3td>
    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;
	}
}

完整代码


<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>checkth>
                <th>1th>
                <th>2th>
                <th>3th>
            tr>
            <tr>
                <td><input type="checkbox" name="check">td>
                <td>1td>
                <td>1td>
                <td>1td>
            tr>
            <tr>
                <td><input type="checkbox" name="check">td>
                <td>2td>
                <td>2td>
                <td>2td>
            tr>
            <tr>
                <td><input type="checkbox" name="check">td>
                <td>3td>
                <td>3td>
                <td>3td>
            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小案例)