扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
html xmlns=""
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站制作、延津网络推广、微信小程序开发、延津网络营销、延津企业策划、延津品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供延津建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title复选框(checkbox)全选/全不选/返选/title
style
body,dl,dt,dd,p{margin:0;padding:0;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:700;}
p{margin-top:10px;}
/style
script type="text/javascript"
window.onload = function ()
{
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function ()
{
for (var i = 1, n = 0; i oInput.length; i++)
{
oInput[i].checked n++
}
oInput[0].checked = n == oInput.length - 1;
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i oInput.length; i++)
{
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function ()
{
for (var i = 1; i oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
}
/script
/head
body
dl
dtinput type="checkbox" id="checkAll" /label全选/labela href="javascript:;"反选/a/dt
dd
pinput type="checkbox" name="item" /label选项(一)/label/p
pinput type="checkbox" name="item" /label选项(二)/label/p
pinput type="checkbox" name="item" /label选项(三)/label/p
pinput type="checkbox" name="item" /label选项(四)/label/p
pinput type="checkbox" name="item" /label选项(五)/label/p
pinput type="checkbox" name="item" /label选项(六)/label/p
pinput type="checkbox" name="item" /label选项(七)/label/p
pinput type="checkbox" name="item" /label选项(八)/label/p
pinput type="checkbox" name="item" /label选项(九)/label/p
pinput type="checkbox" name="item" /label选项(十)/label/p
/dd
/dl
center1、切换全选/全不选文字;2、根据选中个数更新全选框状态;/center
/body
/html
好好研究一下吧,如果想学js去妙味课堂那里有全套js视屏教程
!DOCTYPE html
html
head
titleJS实现全选、不选、反选 /title
meta name="content-type" content="text/html; charset=UTF-8"
/head
body
input type="button" id="All" value="全选" /
input type="button" id="uncheck" value="不选" /
input type="button" id="othercheck" value="反选" /
div id="div"
input type="checkbox" /苹果br /
input type="checkbox" /火龙果br /
input type="checkbox" /橘子br /
input type="checkbox" /葡萄br /
input type="checkbox" /香蕉br /
input type="checkbox" /提子br /
input type="checkbox" /栗子br /
/body
/html
script
window.onload=function(){
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.onclick=function(){
for(i=0;iCheckBox.length;i++){
CheckBox[i].checked=true;
};
};
UnCheck.onclick=function(){
for(i=0;iCheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.onclick=function(){
for(i=0;iCheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
}
};
};
};
/script
var div=document.getElementById(div的id);
var chks=div.getElementsByName(checkbox的name); //checkbox设为同一个name
for(var i=0;ichks.length;i++){
chks[i].checked;//全选
chks[i].checked=!chks[i].checked //反选
}
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title关于选择问题/title
script src="js/jquery.js"/script
script
$(document).ready(function(){
$("div").click(function(){
var a= $(this);//得到点击项
alert(a.siblings().text());//a.siblings()得到a的同辈元素,不包含a
})
})
/script
/head
body
div1,Hello/divdivspan2,Hello Again/span/divdiv3,And Again/div
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流