您正在使用 IPV4 [54.234.45.33] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JavaScript实现复选框全选功能
内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......
<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

table {

width: 300px;

border-spacing: 0;

/* text-align: center; */

margin: 100px auto;

border-collapse: collapse;

}


table tr:nth-child(n+2)>td {

text-align: left;

background-color: rgb(250, 245, 245);

color: dimgray;

font-size: 14px;

}


table tr:nth-child(1) {

background-color: skyblue;

color: white;

}


th,

td {

padding: 10px;

border: 0.5px solid gray;

}

</style>

</head>


<body>

<table>

<tr>

<th><input type="checkbox" name="" id="all"></th>

<th>商品</th>

<th>价格</th>

</tr>

<tr>

<td><input type="checkbox" name="" id="ip8"></td>

<td>iPhone8</td>

<td>8000</td>

</tr>

<tr>

<td><input type="checkbox" name="" id="pro"></td>

<td>iPad Pro</td>

<td>5000</td>

</tr>

<tr>

<td><input type="checkbox" name="" id="air"></td>

<td>iPad Air</td>

<td>2000</td>

</tr>

<tr>

<td><input type="checkbox" name="" id="watch"></td>

<td>Apple Watch</td>

<td>2000</td>

</tr>

</table>


<script>

var all = document.getElementById('all');

var items = document.querySelectorAll('tr>td>input');

all.onclick = function() {

for (var i = 0; i < items.length; i++) {

items[i].checked = this.checked;

}

}



for (var i = 0; i < items.length; i++) {

items[i].onclick = function() {

var flag_all = 1;

for (var j = 0; j < items.length; j++) {

if (items[j].checked == 0) {

flag_all = 0;

all.checked = flag_all;

break;

}

}

all.checked = flag_all;

}

}

</script>

</body>


</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript实现动态加载删除表格

 

下一篇:js实现星星闪特效

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:12
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....