爱好选择器_爱好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

智能推荐

Python import各种包遇到的问题_import helper出错-程序员宅基地

文章浏览阅读1.5k次。对于一般的包,直接File->Settings->Project Interpreter->点加号搜名字就行了但是在安装seaborn的时候,总是提示出错,问题可能在于seaborn要依赖于scipy,但是装seaborn的时候他不给你装scipy,只能手动去装,于是我就去一个网站下载了scipy:http://www.lfd.uci.edu/~gohlke/pythonlibs/#sci_import helper出错

大学生网页作业设计HTML,库里网页_库里的html动态网页-程序员宅基地

文章浏览阅读1.3k次,点赞3次,收藏11次。大学生网页代码,静态动态都可以做,这是我随手做的球星库里的网页_库里的html动态网页

SVN命令行基本操作_svn命令 显示修改列表-程序员宅基地

文章浏览阅读467次。原文地址:http://blog.csdn.net/hekunhotmail/article/details/9302541以下是我常用到的svn 命令行,整理了一下,这东西版本控制上很有用,所以不会不行,当然,你也可以选择一些svn图形界面的工具0 查看当前工作目录svn 状态简写:svn st1、将文件checkout到本地目录svn checkout path(path是_svn命令 显示修改列表

mysql decimal 整数_MySQL数据类型DECIMAL用法详解-程序员宅基地

文章浏览阅读834次。MySQLDECIMAL数据类型用于在数据库中存储精确的数值。我们经常将DECIMAL数据类型用于保留准确精确度的列,例如会计系统中的货币数据。要定义数据类型为DECIMAL的列,请使用以下语法:column_name DECIMAL(P,D);在上面的语法中:P是表示有效数字数的精度。P范围为1〜65。D是表示小数点后的位数。D的范围是0~30。MySQL要求D小于或等于(<=)P。DEC..._mysql decimal 保存成整数

下载安装 gSoap_gsoap download-程序员宅基地

文章浏览阅读750次。文章目录一、官网1. Products (产品介绍)2. Dev Center (开发者中心)(1)Getting Started(入门教程)(2)Tutorials(教程)(3)Documentation(文档)(4)Download & Help(下载和帮助)总结一、官网官网地址是 https://www.genivia.com/,主页很简单。接下来看一下主要内容。1. Products (产品介绍)最先进的C/XC++自动编码工具是XML Web服务API和其他XML应用程序,是_gsoap download

设备驱动模型中设备的init_name成员_struct device init_name-程序员宅基地

文章浏览阅读796次。现象是:依次加载了总线bus,设备device,驱动driver,在加载驱动时候出现了segmentation fault。环境条件:采用的是国嵌的教材(可能是教材比较古老了吧,导致出现这样问题),内核版本使用的是2.6.32.2。最后查找原因是由于空指针导致了在strncmp产生了段错误。_struct device init_name

随便推点

pandas基础学习-程序员宅基地

文章浏览阅读27次。作为参数,0表示第一行,1表示第2行,以此类推。DataFrame意为数据框架,是Pandas库中的一种数据结构,类似于二维表,由行和列组成,与Series一样支持多种数据类型。loc属性,以列名(columns)和行名(index)作为参数,当只有一个参数时,默认是行名,即抽取整行数据,包括所有列。修改行标题,使用DataFrame对象的index属性直接赋值,,或者使用DataFrame对象的rename方法修改行标题。缺失值的处理方式有不处理、删除、填充或替换、插值(均值、中位数、众数等填补)_pandas基础

关于将android项目发布到jcenter的最新最全说明_publication not found-程序员宅基地

文章浏览阅读3.1k次。方式一 一些坑提醒 项目中含有中文,那么请全局设置utf-8编码或者,使用另一种方式生成JavaDoc(可以仔细看下方生成JavaDoc方式,不一样的) 上传的库的名字,是和你Module的名字是一样的!!!所以你的Module叫什么,你的gradle依赖路径就是: groupId:moduleName:publishVersion 下面的步骤只是将项目提交到Maven里面,你要在提交完成后_publication not found

RTKLIB中ppp代码解析_rtklib进行ppp解算-程序员宅基地

文章浏览阅读1.1k次,点赞21次,收藏25次。v= zk - hx 在代码中对应的是v[nv]=y-(r+cdtr-CLIGHT*dts[i*2]+dtrp+C*dion+dcb+bias);9) ppp_res(9,obs,n,rs,dts,var,svh,dr,exc,nav,xp,rtk,v,H,R,azel)) 模糊度固定的残差校验。kalman方程中的测量xk = xk/k-1 +kv 以及pk = pk/k-1 - kh*pk/k-1 状态更新。待估参数的预测,对应klaman公式中的xk/k-1、 Pk/k-1。_rtklib进行ppp解算

learn-SVG学习_如何训练svg标注数据集-程序员宅基地

文章浏览阅读60次。SVG 是可缩放矢量图形的缩写,它是一种用于描述二维矢量图形的XML标记语言。与传统的栅格图像不同,SVG图像可以无限缩放而不会失真,同时也支持交互和动画等特性。SVG最早于1999年由W3C发布,用于在Web上展示矢量图形,并于2001年正式成为标准。在过去的二十多年中,SVG经历了多次更新和改进,增加了更多的功能和特性,如动画、交互等,并逐渐得到广泛的应用。SVG2.0于2016年9月15日成为W3C候选推荐标准,最新草案于。_如何训练svg标注数据集

WINDOWS 端CUDA10.2+CUDNN8环境搭建for YOLOV5 and Pytorch1.7-程序员宅基地

文章浏览阅读1.5k次,点赞4次,收藏11次。Windows 端CUDA10.2+CUDNN8环境搭建for Pytorch1.71.CUDA下载安装1.1 查看自己的显卡1.2 显卡驱动下载及安装1.3 显卡驱动安装检测1.4 CUDN下载1.5 CUDN安装1.6 环境变量设置2 CUDNN安装2.1 CUDNN下载2.2 CUDNN安装2.3 CUDA安装检测最近,我做了一些使用YOLOV5算法的项目,遇到了很多的坑,也感叹YOLOV5的人性化操作,如此真香的算法,忍不住拿出来与大家进行分享,现在就把项目过程中的一些操作逐个记录一遍。很不好意_cudnn8

优化Hadoop Balancer运行速度_failed to move blk_1076014847_2274553 with size=89-程序员宅基地

文章浏览阅读6.7k次。 1. 修改dfs.datanode.max.transfer.threads = 4096 (如果运行hbase的话建议为16384),指定用于在DataNode间传输block数据的最大线程数,老版本的对应参数为dfs.datanode.max.xcievers2. 修改dfs.datanode.balance.bandwidthPerSec = 52428800,指定DataNod..._failed to move blk_1076014847_2274553 with size=89971516 from 172.16.33.248:

推荐文章

热门文章

相关标签