简单实现jQuery多选框功能


Posted in Javascript onJanuary 09, 2017

Jquery多选框的基本操作:支持全选、反选、取消全选的功能

HTML正文:

<input type="checkbox" id="c1">全选/全不选<br>
兴趣爱好:<br>
<input type="checkbox" name="interst" value="basketball">篮球
<input type="checkbox" name="interst" value="football">足球
<input type="checkbox" name="interst" value="bedminton">羽毛球<br>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="全不选">
<input type="button" id="b3" value="反选">
<input type="button" id="b4" value="显示">

Javascript操作代码:

$("#c1").click(function(){
if(this.checked){
  $("input[name='interst']").attr("checked","checked");
}else{
  //$("input[name='interst']").attr("checked",""); //等价于
  $("input[name='interst']").removeAttr("checked");
}
});

$("#b1").click(function(){
  $("input[name='interst']").attr("checked","checked");
});

$("#b2").click(function(){
  $("input[name='interst']").attr("checked","");
});

$("#b3").click(function(){
  $("input[name='interst']").each(function(){
  if(this.checked){
    this.checked="";
  }else{
    this.checked="checked";
  }
  });
});

$("#b4").click(function(){
$("input[name='interst']:checked").each(function(){
  alert(this.value);
});
});

效果:

简单实现jQuery多选框功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
详解JavaScript函数对象
Nov 15 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
js 作用域和变量详解
Feb 16 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
简单了解Vue computed属性及watch区别
Jul 10 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
You might like
php处理多图上传压缩代码功能
2018/06/13 PHP
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JS高级运动实例分析
2016/12/20 Javascript
详解jQuery选择器
2016/12/21 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
JsChart组件使用详解
2018/03/04 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python匿名函数及应用示例
2019/04/09 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python opencv进行图像拼接
2020/03/27 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
一位农村小子的自荐信
2014/04/07 职场文书
python在package下继续嵌套一个package
2022/04/14 Python