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 ...
随机推荐
- HDU 1031.Design T-Shirt【结构体二次排序】【8月21】
Design T-Shirt Problem Description Soon after he decided to design a T-shirt for our Algorithm Board ...
- [转] 买彩票的利器--gun
源链接 还在自己买彩票吗,有个现成的:GNU shuf命令. shuf -i - -n | 这样就会产生两组彩票(1~36个数字任选) 当然还可以派其他用途,比如: shuf -e clubs hea ...
- FileWriter简单用法并记录日志
import java.io.*; import java.util.Date; /** * Created by Administrator on 2018/4/6. */ public class ...
- 使用JDBC 插入向数据库插入对象
package com.ctl.util; import java.io.IOException; import java.lang.reflect.Field; import java.lang.r ...
- IOS开发之----常用的基本GDB命令【转】
原文地址:http://blog.sina.com.cn/s/blog_71715bf801016d2y.html gdb不是万能的,可是没有gdb却是万万不能的.这里给大家简单介绍下iOS开发中最基 ...
- [读书笔记]《没人会告诉你的PPT真相》
这本书分了三部分.第一部分偏重于基础技能,其中分为三部分,打印.放映.保存.第二部分是进阶,分为模板下载.模板修改.增加自定义页面等.第三部分是打造商业范的PPT,分为商业范的特征,具体技能体现(重复 ...
- java 使用xom对象数据序列化为xml、反序列化、Preferences相关操作小案例
package org.rui.io.xml; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import ...
- YTU 2430: C语言习题 链表建立,插入,删除,输出
2430: C语言习题 链表建立,插入,删除,输出 时间限制: 1 Sec 内存限制: 128 MB 提交: 576 解决: 280 题目描述 编写一个函数creatlink,用来建立一个动态链表 ...
- 在Main Thread中使用异步
Whenever you first start an Android application, a thread called "main" is automatically c ...
- 【USACO 2011】 道路和航线
[题目链接] 点击打开链接 [算法] SPFA + SLF / LLL 优化 [代码] #include<bits/stdc++.h> using namespace std; #defi ...