<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//css样式
<style>
table,td{
width: 650px;
height: 10px;
margin: 0 auto; /* 表格居中显示 */
border-top: 2px solid #444; /* 表格的上边框 */
/*border-bottom: 2px solid #444; !* 表格的下边框 *!*/
border-color: #444444;
background-color: chartreuse;
}
button{
background-color: burlywood;
}
</style>
//css样式
</head>
<table>
<tr>
<td>电子产品</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" id="all" name="allcheck" onclick="checkall()">全选</td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td><input type="checkbox" id="a1" name="dx" onclick="singlecheck()"></td>
<td><img style="width:100px " src="1.jpg"></td>
<td>杜比环绕,家庭应是必备,超真实享受<br>
出售者：ling112233
<button onclick="">和我联系</button>
<img style="width: 10px " src="5.jpg"> 收藏</td>
<td>一口价<br>
<span id="jc1">2833.0</span></td>
</tr>
<tr>
<td><input type="checkbox" id="a2" name="dx" onclick="singlecheck()"></td>
<td><img style="width: 100px" src="2.jpg"></td>
<td>NVDIV 9999GT 512P18 256btf极品显卡，不容错过<br>
出售者：aipiaopiao110
<button onclick="">和我联系</button>
<img style="width: 10px " src="5.jpg"> 收藏</td>
<td>一口价<br>
<span id="jc2">6464.0</span></td>
</tr>
<tr>
<td><input type="checkbox" id="a3" name="dx" onclick="singlecheck()"></td>
<td><img style="width: 100px" src="3.jpg"></td>
<td>精品热卖：高清晰，30寸等离子电视<br>
出售者：阳光的挣扎
<button onclick="">和我联系</button>
<img style="width: 10px " src="5.jpg"> 收藏</td>
<td>一口价<br>
<span id="jcl3">18888.0</span></td>
</tr>
<tr>
<td><input type="checkbox" id="a4" name="dx" onclick="singlecheck()"></td>
<td><img style="width: 100px" src="4.jpg"></td>
<td>Sorry索尔家用最新款笔记本<br>
出售者：疯狂的镜无
<button onclick="">和我联系</button>
<img style="width: 10px " src="5.jpg"> 收藏</td>
<td>一口价<br>
<span id="jcl4">5889.0</span></td>
</tr>
</table>
<button onclick="sum()">求和</button>
<div id="dd"></div>
<body>
<script>
function getdall(){
var did=document.getElementById("all")
console.log(did)
}
function getname(){
var dname=document.getElementsByName("dx")
console.log(dname)
for(i=0;i<dname.length;i++){
console.log(dname[i])
}
}
function gettag(){
var dtag=document.getElementsByTagName("input")
console.log(dtag.length)
}
//全选
function checkall(){
var dname=document.getElementsByName("dx")
var did=document.getElementById("all")
for(i=0;i<dname.length;i++){
if(did.checked==true)
dname[i].checked=true
// else if (did.checked!=true)
// dname[i].checked=flase
else
dname[i].checked=false
}
if(did.checked==false)
{
console.log(1)
for (i=0;i<dname.length;i++){
console.log(i)
dname[i].checked=false
}
}
}
//单选
function singlecheck(){
var dname=document.getElementsByName("dx")
var did=document.getElementById("all")
var j=0
for(i=0;i<dname.length;i++) {
if (dname[i].checked) {
j++
if(j==4) did.checked = true
else
did.checked = false
}
}
}
function sum(){
var did1=Number(document.getElementById("jc1").innerText)
var did2=Number(document.getElementById("jc2").innerText)
var did3=Number(document.getElementById("jcl3").innerText)
var did4=Number(document.getElementById("jcl4").innerText)
var sum=Number(did1+did2+did3+did4)
var dd = document.getElementById("dd")
dd.innerText=sum
}
</script>
</body>
</html>
单选框复选框应用
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 分享人：徐晋 1. 单选框与复选框的应用 单选框 点击已确认时显示输入框，点击TBD时隐藏输入框 复选框 Sc_D...
- 5月以来，哪怕对市场风向再不敏感的人，也感觉到阵阵凉意。二级市场连续下挫，一级市场融资环境恶化，不论企业融资数量还...
