文章目录
- 一、模板代码
- 需求1全选、全不选、反选
- 需求2
- 二、解决方案
- 需求1：全选、反选、全不选
- 需求2：
- 总结
一、模板代码
需求1全选、全不选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选1(空白)</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
功能需求：
①全选按钮：点击后所有爱好都选中
②全不选按钮：点击后所有爱好都不选中
③反选按钮：点击后所有爱好选中状态反转
④提交按钮：点击后依次弹出选中内容
*/
$(function(){
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是：
<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>
需求2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选2(空白)</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
功能需求：
①全选框：点击后让所有爱好的选中状态和自己一致
②爱好框：点满后将全选框选中，否则取消选中
*/
$(function(){
});
</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="乒乓球" />乒乓球
</form>
</body>
</html>
二、解决方案
需求1：全选、反选、全不选
实际上取反，没有必要写这么复杂，还有更简单的，直接取反就好了
注意，这个是DOM风格
下面我们再看一下jQuery风格怎么写
从这里可以看出，实现这个需求，其实使用DOM更好
需求2：
总结
DOM和jQuery 灵活使用，它们之间不是取代关系，更多的是互补关系