0
点赞
收藏
分享

微信扫一扫

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选


文章目录

  • ​​一、模板代码​​
  • ​​需求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:全选、反选、全不选

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全不选


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全选_02

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_jQuery_03


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_反选_04


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全不选_05


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_DOM_06


实际上取反,没有必要写这么复杂,还有更简单的,直接取反就好了

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_jQuery_07


注意,这个是DOM风格

下面我们再看一下jQuery风格怎么写

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全不选_08


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_jQuery_09

从这里可以看出,实现这个需求,其实使用DOM更好

需求2:

javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_jQuery_10


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全选_11


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_全不选_12


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_jQuery_13


javaEE004.04jQuery 需求 复选框的 全选、反选、全不选_DOM_14

总结

DOM和jQuery 灵活使用,它们之间不是取代关系,更多的是互补关系


举报

相关推荐

0 条评论