<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("checkedAll_2").onclick = function(){
var flag = this.checked;
var items = document.getElementsByName("items");
for(var i = 0 ; i < items.length ; i ++){
items[i].checked = flag;
}
}
var items = document.getElementsByName("items");
for(var i = 0 ; i < items.length ; i ++){
items[i].onclick = function(){
var number = 0;
for(var j = 0 ; j < items.length ; j ++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked =
(items.length == number);
}
}
document.getElementById("CheckedAll").onclick = function(){
for(var i = 0; i<items.length;i++){
items[i].checked = true;
}
}
document.getElementById("CheckedNo").onclick = function(){
for(var i = 0; i<items.length;i++){
items[i].checked = false;
}
}
document.getElementById("CheckedRev").onclick = function(){
for(var i = 0; i<items.length;i++){
items[i].checked = !items[i].checked;
}
}
document.getElementById("send").onclick = function(){
for(var i = 0; i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
选择你喜欢的电影:<input type="checkbox" id="checkedAll_2" />全选/全不选
<br />
<input type="checkbox" name="items" value="蜘蛛侠" />蜘蛛侠
<input type="checkbox"name="items" value="青蜂侠" />青蜂侠
<input type="checkbox" name="items"value="钢铁侠" />钢铁侠
<input type="checkbox" name="items" value="蝙蝠侠" />蝙蝠侠
<br />
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
</body>
</html>
javascript : 复选框的单选,全选,全不选,反选。
最新推荐文章于 2023-05-20 08:42:36 发布