JavaScript之实例练习（正反选、二级联动）

鸿蒙Next

于 2020-05-13 13:28:57 发布

阅读量352

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发(js,css,html) 文章标签： js css java checkbox 程序人生

本文链接：https://blog.youkuaiyun.com/Viewinfinitely/article/details/106096143

文章目录

- - - 正反选案例
    - 二级联动案例

正反选案例

1、使用的原理

全选操作，就是遍历整个表格中的每一项，将checked设置为True
取消则是将checked全变为false就行
反选则是非原来的状态（原来选中，非就是不选中）

2、练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正反选</title>
</head>
<body>
<button onclick="allSelect()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>


<table border="2px">
    <tr>
        <td><input type="checkbox"></td>
        <td>培根</td>
        <td>鸡排套餐</td>
        <td>白开水</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>牛肉饭</td>
        <td>鸡腿</td>
        <td>冰淇淋</td>