<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全选" οnclick="selAll();"/>
<input type="button" value="全不选" οnclick="selNo();"/>
<input type="button" value="反选" οnclick="selOther();"/>
<script type="text/javascript">
//实现全选和全不选
function selAllNo() {
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/
//得到上面复选框
var box1 = document.getElementById("boxid");
//判断这个复选框是否是选择
if(box1.checked == true) { //是选择状态
//调用全选方法
selAll();
} else { //不是选中状态
//调用全不选方法
selNo();
}
}
//实现反选的操作
function selOther() {
/*
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中，属性checked设置成false，否则，设置成true
*/
//获取要操作的复选框
var loves11 = document.getElementsByName("love");
//遍历数组
for(var a=0;a<loves11.length;a++) {
//得到每一个复选框
var love11 = loves11[a];
//判断当前这个复选框是什么状态
if(love11.checked == true) { //是选中的状态
//设置checked=false
love11.checked = false;
} else { //是不选中的状态
//把checked=true
love11.checked = true;
}
}
}
//实现全不选的操作
function selNo() {
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
//得到要操作的复选框
var loves1 = document.getElementsByName("love");
//遍历数组
for(var j=0;j<loves1.length;j++) {
//得到每一个复选框
var love1 = loves1[j];
//设置属性的值checked = false;
love1.checked = false;
}
}
//实现全选的操作
function selAll() {
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组，
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组，得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; //得到每一个复选框
//设置属性是true
love1.checked = true;
}
}
</script>
</body>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全选" οnclick="selAll();"/>
<input type="button" value="全不选" οnclick="selNo();"/>
<input type="button" value="反选" οnclick="selOther();"/>
<script type="text/javascript">
//实现全选和全不选
function selAllNo() {
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/
//得到上面复选框
var box1 = document.getElementById("boxid");
//判断这个复选框是否是选择
if(box1.checked == true) { //是选择状态
//调用全选方法
selAll();
} else { //不是选中状态
//调用全不选方法
selNo();
}
}
//实现反选的操作
function selOther() {
/*
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中，属性checked设置成false，否则，设置成true
*/
//获取要操作的复选框
var loves11 = document.getElementsByName("love");
//遍历数组
for(var a=0;a<loves11.length;a++) {
//得到每一个复选框
var love11 = loves11[a];
//判断当前这个复选框是什么状态
if(love11.checked == true) { //是选中的状态
//设置checked=false
love11.checked = false;
} else { //是不选中的状态
//把checked=true
love11.checked = true;
}
}
}
//实现全不选的操作
function selNo() {
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
//得到要操作的复选框
var loves1 = document.getElementsByName("love");
//遍历数组
for(var j=0;j<loves1.length;j++) {
//得到每一个复选框
var love1 = loves1[j];
//设置属性的值checked = false;
love1.checked = false;
}
}
//实现全选的操作
function selAll() {
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组，
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组，得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; //得到每一个复选框
//设置属性是true
love1.checked = true;
}
}
</script>
</body>
</html>
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
