正文
反选javascript,反选选区快捷键
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一个页面有2组checkbox复选框，如何用JS实现对这2组分别全选、反选、全不选？
html xmlns=""
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视屏教程
相关问答
Q1: 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
Q2: 2.在html中怎么使一个div中的所有复选框全选和反选，写出JS脚本。
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 //反选
}
Q3: jquery选择器反向选择的问题
!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
