爱好选择器_爱好checked-程序员宅基地

技术标签: jQuery  

<!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>
</head>
<body>

<form>
  你爱好的运动是?<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>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'提交': 提示所有勾选的爱好
   5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   */
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')

  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    
    $items.prop('checked', true)
    $checkedAllBox.prop('checked', true)
  })

  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    
    $items.prop('checked', false)
    $checkedAllBox.prop('checked', false)
  })

  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    
    $items.each(function () {
    
      this.checked = !this.checked
    })
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })

  //4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    
    $items.filter(':checked').each(function () {
    
      alert(this.value)
    })
  })

  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  $checkedAllBox.click(function () {
    
    $items.prop('checked', this.checked)
  })

  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  $items.click(function () {
    
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })
</script>
</body>

</html>

视频

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43666089/article/details/104244801

智能推荐

猿创征文|分享一下我的日常开发工具和常用软件_微信开发者工具和hbuilder区别-程序员宅基地

文章浏览阅读1.7k次,点赞24次,收藏18次。人生苦短,拒绝内卷。我是跟着飞哥学编程,一个一心向阳,向阳而生,努力向上生长的年轻人。加油兄弟们……_微信开发者工具和hbuilder区别

RFC 4904 翻译_sipphone-context-程序员宅基地

文章浏览阅读1.8k次。网络工作组 V. GurbaniRFC: 4904 Bell Laboratories, Alcatel-Lucent类别:Standards Track C. Jennings Cisco Systems ..._sipphone-context

阅读app原型制作_qq阅读产品流程图-程序员宅基地

文章浏览阅读1.2k次,点赞5次,收藏21次。一、背景概述1、产品概念及目标为有读书爱好的群体提供优质阅读。目标是能够实现推荐书籍、方便找书的阅读平台。目标用户主要为学生群体、青年知识分子、碎片化阅读者、电子书爱好者等。2、文档阅读对象设计、开发、测试二、产品描述1、产品整体流程产品框架图2、功能列表三、功能需求1、找书2、阅读3、评论四、原型制作1.书城2.分类3..._qq阅读产品流程图

JVM调优实践_jvm调优实战-程序员宅基地

文章浏览阅读915次。前面已经分享了很多关于jvm的知识,具体的详情都可以查看上几篇的文章。从jvm的调优原理,垃圾查找算法,垃圾回收算法,再到jvm调优工具,调优参数等。需要掌握的jvm知识,已经是循序渐进,一步一步的深入学习。那在掌握这些内容的时候,是不是有种想去实践的冲动呢?好了,今天我们就来进行一次jvm调优实践之旅吧!!!JVM实践调优主要步骤分析GC日志堆内存与元空间优化线程堆栈优化堆内存内部优化:新生代和老年代比例垃圾回收器优化。..._jvm调优实战

通过银行卡号获取银行名称和银行图标的ICON_获取银行icon-程序员宅基地

文章浏览阅读8.5k次。文章目录通过银行卡号获取银行名称和银行图标的ICON1、构建一个结果类2、通过RestTemplate GET 支付宝接口获取识别结果3、部分银行编码对照4、银行LOGO图片地址通过银行卡号获取银行名称和银行图标的ICON1、构建一个结果类import java.io.Serializable;import java.util.List;/** * @author Created ..._获取银行icon

python DataFrame导出为excel_python dataframe保存为excel-程序员宅基地

文章浏览阅读2.5w次,点赞9次,收藏87次。导出数据最简便的方法就是dataframe.to_excel()或to_csv()。但这种方法的缺点在于excel只有一个sheet,每次生成同名文件会覆盖原有文件,且数量较多时比较难看,用excel writter会更清晰。目前网上一共有两种保存到sheet的方法,方法1:用pandas自带包ExcelWriter。import pandas as pddata = pd.DataFrame([1])data2 = pd.DataFrame([2])with pd.ExcelWriter('te_python dataframe保存为excel

随便推点

Web of science数据下载以数据处理-程序员宅基地

文章浏览阅读957次。目标网站分析我们要获取的就是这几个数值程序实现# -*- coding: utf-8 -*-"""@Datetime: 2019/2/28@Author: Zhang Yafei"""# pip install -i https://pypi.tuna.tsinghua.edu.cn/simple xlrd sele..._zhang ziyin

winserver服务器系统禁ping解决办法_win服务器 禁止ping-程序员宅基地

文章浏览阅读539次,点赞11次,收藏10次。windowsserver关闭禁ping功能方法,允许设备ping_win服务器 禁止ping

STM32用STLINK烧写外置FLASH遇到的问题_stm32 通过stlink直接烧录外挂spi flash-程序员宅基地

文章浏览阅读9.3k次,点赞4次,收藏15次。由于项目需要大量的图片字库还有音频文件,所以外挂了NOR flash和NAND flash,需要用到烧写算法STLDR(就是包含几段在SRAM里面运行的代码),调试的时候遇到了几个问题,都是大意造成的,所以写出来记录一下首先烧写用到PC端软件是STM32 STLINK Utility,在安装目录下附带了一些常用的flash的烧写算法,但没有我用到的那种,所以只能参考ST-LINK Utility..._stm32 通过stlink直接烧录外挂spi flash

土建类技术质量知识题库_风机盘管机组试压应与系统一同进行-程序员宅基地

文章浏览阅读5.7k次。土建类技术质量知识题库_风机盘管机组试压应与系统一同进行

8. Web安全—渗透测试用例—SQL注入测试-程序员宅基地

文章浏览阅读16次。8. Web安全—渗透测试用例—SQL注入测试

Oracle Tuning性能调整的一些总结-程序员宅基地

文章浏览阅读105次。关于Oracle的性能调整,一般包括两个方面,一是指Oracle数据库本身的调整,比如SGA、PGA的优化设置,二是连接Oracle的应用程序以及SQL语句的优化。做好这两个方面的优化,就可以使一套完整的Oracle应用系统处于..._tuning多少是正常的