js实现表单checkbox的单选,全选
全选&单选
//<input type="checkbox" name="" class="quan" value="" />全选
//<input type="checkbox" name="" class="dan" value="" />单选
//<input type="checkbox" name="" class="dan" value="" />单选
//<input type="checkbox" name="" class="dan" value="" />单选
//<input type="checkbox" name="" class="dan" value="" />单选
//<input type="checkbox" name="" class="quan" value="" />全选
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $checke_q = $(".quan"); //全选按钮
var $checke_d = $(".dan"); //单选按钮
$checke_q.click(function() {
var that = this;
$checke_d.each(function() { //所有的单选按钮跟随选中的多选按钮变化
this.checked = that.checked;
})
$checke_q.each(function(){ //所有的多选按钮跟随选中的多选按钮变化
this.checked=that.checked;
})
})
$checke_d.change(function() {
let count = 0; //单选 按钮 个数
$checke_d.each(function() {
if(this.checked) {
count ++;
}
})
if(count == $checke_d.length) { //当count等于单选按钮的个数时 说明单选按钮全部选中了,此时多选按钮也该被选中
$checke_q.each(function() {
this.checked = true;
})
} else {
$checke_q.each(function() {
this.checked = false;
})
}
})
</script>
js实现表单checkbox的单选,全选的更多相关文章
- checkbox的单选全选,反选,计算价格,删除
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- Vue.js:表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- JS 更改表单的提交时间和Input file的样式
JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
- js动态控制表单表格
js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
随机推荐
- Qt 用户登录界面
使用QT创建自己的登录窗口: 主要步骤: 1.窗口界面的绘制 2.沟通数据库进行密码验证 void MainWindow::on_pushButton_clicked() { // 连 ...
- Spark调研笔记第3篇 - Spark集群相应用的调度策略简单介绍
Spark集群的调度分应用间调度和应用内调度两种情况,下文分别进行说明. 1. 应用间调度 1) 调度策略1: 资源静态分区 资源静态分区是指整个集群的资源被预先划分为多个partitions,资源分 ...
- 在CentOS上把Nginx从1.2.4升级到1.6.0
在CentOS上升级把Nginx从1.2.4升级到1.6.0 摘要:本文记录了在CentOS 6.3上,把Nginx从1.2.4升级到1.6.0的过程. 1. 概述 在我做的一个项目中,最近我对生产服 ...
- C和Fortran互相传递动态数组
C和Fortran的相互调用传递数值的方法有很多,但是F03标准的出笼,使用ISO_C_BINDING进行C和Fortran的互相调用有着更显著的优势: 1.与编译器和平台无关: 2.Fortran中 ...
- 嵌入式linux 实现mdev SD卡和U盘自己主动挂载和卸载的方法 mdev.conf
首先先參考这些博客做一些了解:http://linux.chinaunix.net/techdoc/install/2009/11/18/1144936.shtml http://www.cnblog ...
- 配置JDK环境变量配置及path和classpath的作用
1.环境变量配置 用鼠标右击“我的电脑”->属性->高级->环境变量 JAVA_HOME :D:\Program Files\Java\jdk1.6.0_12(JDK安装路径) Pa ...
- BZOJ_3448_[Usaco2014 Feb]Auto-complete_Trie树
BZOJ_3448_[Usaco2014 Feb]Auto-complete_Trie Description Bessie the cow has a new cell phone and enjo ...
- AutoIT: 对数据库的访问,数据提取操作
#include<array.au3> $conn= ObjCreate("ADODB.Connection") $RS= ObjCreate("ADODB. ...
- linux块设备模型架构框架
Linux块设备的原理远比字符设备要复杂得多,尽管在linux这一块的方法论有很多相似之处,但考虑到它是用中块结构,它常常要搭配内存页管理,页缓冲块缓冲来改善硬盘访问的速度,按照块硬件最大的性能要求进 ...
- Create
BOOL Create(LPCTSTR lpszClassName,LPCTSTR lpszWindowName, DWORD dwStyle,const RECT& rect,CWnd* p ...