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 ...
随机推荐
- 机器学习笔记之PCA-SIFT总结
不多说,直接上干货! PCA-SIFT算法在描述子构建上作了创新,主要是 将统计学中的主成分分析(PCA)应用于对描述子向量的降维,以提高匹配效率 . PCA 的原理是:一般有效信号的方差大,噪声的方 ...
- 启动两个Tomcat的方法
由于项目需要,所以要启动两个工程,但是又不能用一个Tomcat,于是就琢磨起了怎么启动两个Tomcat 1:首先,conf/server.xml要把HTTP的端口改成不一致的,我一个是8088,一个 ...
- XMU 1611 刘备闯三国之卖草鞋 【贪心】
1611: 刘备闯三国之卖草鞋 Time Limit: 1000 MS Memory Limit: 64 MBSubmit: 90 Solved: 48[Submit][Status][Web B ...
- docker随谈
最近在搞Docker,其实去年就听老师说过这个东西,说非常火,当时不以为然,还错把它当成docky.当时想想docky不就是一个快速启动工具么,有什么.现在想想真是惭愧... Docker的牛逼之处网 ...
- linux进程编程入门
1.进程的创建与操作 任务描述: 在父进程中创建一个全局变量,一个局部变量,并赋予初始值,用fork函数创建子进程.在子进程中对父进程的变量进行自加操作,并且输出变量值,然后父进程睡眠一段时间 各进程 ...
- 配置ant编译时的jdk版本
如下图,选择对应的sdk版本:
- codeforces 447 A-E div2 补题
A DZY Loves Hash 水题 #include<iostream> #include<cstdio> #include<cstdlib> #include ...
- sqlserver2008Mail
use msdb GO DROP PROC MailTim GO CREATE PROC MailTim @Subject NVARCHAR(100),@Body NVARCHAR( ...
- 【转】python文件打开方式详解——a、a+、r+、w+区别
原文地址:http://blog.csdn.net/ztf312/article/details/47259805 第一步 排除文件打开方式错误: r只读,r+读写,不创建 w新建只写,w+新建读写, ...
- 查看html元素绑定的事件与方法 visual Event 插件
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...