直接上代码
1.html代码
<input type="Checkbox" onclick="checkAll(this)" id="all" />全选
<input type="Checkbox" onclick="checkAllNo()" id="allno" />全不选
<input type="Checkbox" onclick="reverseSel()" id="reall" />反选
<input type="Checkbox" onclick="selValue()" id="selv" />选中的值
<input type="Checkbox" onclick="mustSel()" id="selm" />必选中一个<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10010" />疾风剑豪<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10011" />刀锋意志<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10012" />迅捷斥候<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10013" />崔丝塔娜<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10014" />德玛西亚皇子<br/>
<input type="Checkbox" name="box" onclick="selectAll()" value="10015" />李青<br/>
2.js
//全选
function checkAll(obj) {
//获取name=box的复选框
var boxs = document.getElementsByName("box");
for(var i = 0; i < boxs.length; i++) {
boxs[i].checked = obj.checked;
}
}
//全不选
function checkAllNo(){
var boxs = document.getElementsByName("box");
for(var i=0;i<boxs.length;i++){
boxs[i].checked=false;
}
// selectAll();
}
//如果有未选的,去掉全选
function selectAll() {
//获取name=box的复选框
var boxs = document.getElementsByName("box");
var count = 0;
//遍历所有的复选框
for(var i = 0; i < boxs.length; i++) {
if(boxs[i].checked) {
count++;
}
}
//选中复选框的个数==获取复选框的个数
if(count == boxs.length) {
//设置id为all复选框选中
document.getElementById("all").checked = true;
} else {
//设置id为all复选框不选中
document.getElementById("all").checked = false;
}
}
//反选
function reverseSel(){
var boxs = document.getElementsByName("box");
for(var i = 0; i < boxs.length; i++) {
var value1 = boxs[i];
if(value1.checked){
value1.checked = false;
}else{
value1.checked = true;
}
}
// selectAll();
}
//获取选中的值
function selValue(){
var valArr = [];
var boxs = document.getElementsByName("box");
for(var i = 0; i < boxs.length; i++) {
if(boxs[i].checked == true){
valArr[i] = boxs[i].value;
}
}
var vals = valArr.join(',');
alert(vals)
}
//至少选中一个
function mustSel(){
var boxs = document.getElementsByName("box");
var flag = false ;
for(var i=0;i<boxs.length;i++){
if(boxs[i].checked){
flag = true ;
break ;
}
}
if(!flag){
alert("请最少选择一项!");
document.getElementById('selm').checked = false;
return false ;
}
}