本文介绍了一个简单的HTML页面，该页面使用了jQuery库来实现表单中复选框的全选、全不选及反选功能。通过点击按钮可以轻松地控制一组体育运动项目的复选框状态，并将已选中的项移动到页面下方的展示区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">
</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">
</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
扫一扫
2006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
