简单实现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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
小程序实现tab标签页
Nov 16 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
加强版phplib的DB类
2008/03/31 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
javascript里使用php代码实例
2014/12/13 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
js实现验证码功能
2020/07/24 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
django实现前后台交互实例
2017/08/07 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
采购员的工作职责
2013/12/26 职场文书
企业总经理职责
2014/02/02 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
售房协议书
2014/08/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
停电通知范文
2015/04/16 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书