Jquery学习札记四
Jquery学习笔记四
今天做个小例子，实现复选框的全选。具体是这样的，当选中全选时候，复选框被全部选中，当取消其中一个复选框的按钮后，“全选”框的按钮也取消。当一个复选框也不选的时候，提示“请选择要操作的数据”。只有选中后才可以提交。多的废话不说了，直接贴代码
显示效果，如果全选后，效果如下
取消其中一个复选框后效果如下
如果一个都不选的话，就点提交将提示“请选择要操作的数据”
今天做个小例子，实现复选框的全选。具体是这样的，当选中全选时候，复选框被全部选中，当取消其中一个复选框的按钮后，“全选”框的按钮也取消。当一个复选框也不选的时候，提示“请选择要操作的数据”。只有选中后才可以提交。多的废话不说了，直接贴代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/animation.css" type="text/css">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(function() {
$("#CheckedAll").click(function() {
$('[name:items]:checkbox').attr("checked", this.checked); //实现全选与全不选
});
$('[name=items]:checkbox').click(function() {
var flag = true;
$('[name=items]:checkbox').each(function() {
if(!this.checked) {
flag = false;
}
});
$("#CheckedAll").attr('checked', flag);
});
$("#send").click(function() {
var len = $('[name=items]:checkbox:checked').each().length;
if(len == 0){
alert("请选择要操作的数据");
}else {
$("#form").submit();
}
return false;
})
})
</script>
<title>Jquery Form Test</title>
</head>
<body>
<form id="form" action="test.html">
你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<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="submit" id="send" value="提 交"/>
</form>
</body>
</html>
显示效果，如果全选后，效果如下
取消其中一个复选框后效果如下
如果一个都不选的话，就点提交将提示“请选择要操作的数据”