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 ...
随机推荐
- Deep Learning 29: caffe入门学习
1.跑教程:深度学习(六)caffe入门学习,上面有比较好的注释 .prototxt文件:网络结构文件 solver.prototxt:网络求解文件 net: "examples/mnist ...
- java语法基础(二)
流程控制语句 表达式语句 在表达式后面添加:就构成了表达式语句,简称“语句” 我们编写java代码,更多时候都是在书写表达式语句. int i;声明语句 i = 10;赋值语句 流程控制语句 流程控制 ...
- Ubuntu 16.04安装JDK/JRE并配置环境变量【转】
本文转载自:http://www.linuxdiyf.com/linux/30302.html 作为一个Linux新手,在写这篇文章之前,安装了几次jdk,好多次都是环境变量配置错误,导致无法登录系统 ...
- HDU3001 Travelling —— 状压DP(三进制)
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3001 Travelling Time Limit: 6000/3000 MS (Java/ ...
- 简单的处理git add ,git commit,git push 脚本
创建脚本lazygit.sh #!/bin/bash # 一次性处理git提交 #branch_name=`git symbolic-ref --short -q HEAD` branch_name= ...
- Android JNI MAC OS环境配置
前言—JNI技术简介 JNI是Java Native Interface的缩写,即“Java本地调用”,它是Java世界和Native世界的中介桥梁.其中Native世界一般指C/C++的世界.众所周 ...
- Python进程、线程、协程的对比
1. 执行过程 每个线程有一个程序运行的入口.顺序执行序列和程序的出口.但是线程不能够独立执行,必须依存在进程中,由进程提供多个线程执行控制.每个线程都有他自己的一组CPU寄存器,称为线程的上下文,该 ...
- WebBrowse使用
C# WinForm开发系列 - WebBrowser 2009-12-14 14:19:21 标签:C# - WebBrowser 休闲 WinForm开发系列 介绍Vs 2005中带的WebBr ...
- MQTT、CoAP
实时协议是物联网的一项根本性技术,在物联网领域发挥了重大的作用.目前物联网设备所广泛使用的四大实时协议:XMPP.HTTP.CoAP以及MQTT等可谓各擅所长.亦各有弊端. 那么在万物互联的时代,谁主 ...
- hdu 3503(有点小技巧的dfs(对结点加东西表示边的某些状态))
Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...