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>

转载于:https://www.cnblogs.com/hw-0409/p/7886476.html

js实现表单checkbox的单选，全选相关推荐

html表单全选框,form表单里如何实现全选和全不选
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果. javascript实现全选和全不选效果: 1.首先你 ...
【每日笔记】：layui表单checkbox设为必选
例子 html页面: <div class="layui-form-item"><label class="layui-form-label" ...
Vue+Vant制作单选全选全不选以及删除按钮van-checkbox
在官网上看到vant组件特别好用,就尝试使用checkbox制作单选全选,由于是下午头脑不清楚所以没想通思路,导致了一部分的错误,经过我的老大指点,才想通如此简单的思路,就是都亮和都不亮的区别. 全选 ...
Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...
JS 验证表单不能为空
开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 JS 验证表单不能为空的简单demo,先看效果图实现代码 <!--index.wxm ...
php多选框怎么传值,php多选框表单checkbox参数传递的问题解析
在网页中使用多选框可以一次性选择多个属性值,进行批量操作. 如下的表单内容: 在ASP中,可以直接使用 request.form("delpi") 获取参数值,request.fo ...
Js提交表单的两种方法
提交表单一般有两种一种是submit按钮,一种是调用form的submit方法.虽然都是提交表单,但这两种还是有些差别的. 一般来说,提交form表单的时候需要做一些简单的验证,验证完后才能提交,避免 ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
js实现表单form提交前进行确认提示
在jquery中,可以使用confirm来弹出提示框,实现确认提交.下面小编举例讲解js实现表单form提交前进行确认提示. 工具/原料 js+html 代码编辑器:zend studio 10.0 ...

js实现表单checkbox的单选，全选

全选&单选

js实现表单checkbox的单选，全选相关推荐

最新文章

热门文章