jQuery练习
一. 选择器练习
1. 全选全不选：
<!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>全选全不选</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//给全选按钮绑定单击事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
})
//全不选
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
})
//反选
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
this.checked = !this.checked;
})
//检查是否满选
var allcount = $(":checkbox[name='items']").length;
var chcount = $(":checkbox[name='items']:checked").length;
//设置顶部 全选/全不选 的复选框
$("#checkedAllBox").prop("checked", allcount == chcount);
})
//[提交]
$("#sendBtn").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
})
//[顶部框]
$("#checkedAllBox").click(function () {
$(":checkbox[name='items']").prop("checked", this.checked);
})
//给全部类绑定事件
$(":checkbox[name='items']").click(function () {
//检查是否满选
var allcount = $(":checkbox[name='items']").length;
var chcount = $(":checkbox[name='items']:checked").length;
//设置顶部 全选/全不选 的复选框
$("#checkedAllBox").prop("checked", allcount == chcount);
})
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<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="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
易错点：给全部类绑定事件
$(":checkbox[name='items']").click(function () {
//检查是否满选
var allcount = $(":checkbox[name='items']").length;
var chcount = $(":checkbox[name='items']:checked").length;
//设置顶部 全选/全不选 的复选框
$("#checkedAllBox").prop("checked", allcount == chcount);
})
2. 下拉列表之间的传递
把左边（右边）的下拉列表传递到右边（左边）
<!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>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//选中添加到右边
$("button:eq(0)").click(function(){
$("select[name=sel01] :selected").each(function(){
//alert(this);
$(this).appendTo("select[name=sel02]");
});
});
//全部添加到右边
$("button:eq(1)").click(function(){
$("select[name=sel01] option").each(function(){
//alert(this);
$(this).appendTo("select[name=sel02]");
});
});
//选中删除到左边
$("button:eq(2)").click(function(){
$("select[name=sel02] :selected").each(function(){
//alert(this);
$(this).appendTo("select[name=sel01]");
});
});
//全部删除到左边
$("button:eq(3)").click(function(){
$("select[name=sel02] option").each(function(){
//alert(this);
$(this).appendTo("select[name=sel01]");
});
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
来源：CSDN
作者：你可真高
链接：https://blog.csdn.net/azumatokaku/article/details/104608494