jQuery实现div单选与多选
来源:互联网 发布:mysql主键和外键 编辑:程序博客网 时间:2024/06/18 16:43
jQuery实现div单选与多选
一、单选
1、思想:
先监听所有的div,点击某个div触发事件。如果被点击的div的border是红色,则remove;否则被点击的div的border不是红色,则遍历所有的div,去掉所有的div的红色border,点击了某个div,再给某个加上border。
2、js代码
js代码如下:
$(".container").on("click",this,function () { if($(this).hasClass("redBorder")){ $(this).removeClass("redBorder"); } else{ $(".container").each(function () { $(this).removeClass("redBorder"); }) $(this).addClass("redBorder"); } })
3、完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div单选</title> <style> .container{ width: 100px; height: 100px; background-color: #E6E6E6; border:1px solid #cccccc; text-align: center; line-height: 100px; float: left; margin-left: 20px; } .redBorder{ border: 1px solid red; } </style> <script src="jquery-2.2.4.js" type="text/javascript"></script></head><body><div class="box"> <div class="container">DIV</div> <div class="container">DIV</div> <div class="container">DIV</div></div></body><script> $(".container").on("click",this,function () { if($(this).hasClass("redBorder")){ $(this).removeClass("redBorder"); } else{ $(".container").each(function () { $(this).removeClass("redBorder"); }) $(this).addClass("redBorder"); } })</script></html>
4、选中状态下点击,则去掉选中;未选中状态点击则变成唯一选中状态
二、多选
1、思想:
利用addClass()、removeClass()和toggleClass()函数进行多选。
2、js代码:
$(".container").on("click",this,function () { $(this).toggleClass("redBorder"); })
3、完整代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div单选</title> <style> .container{ width: 100px; height: 100px; background-color: #E6E6E6; border:1px solid #cccccc; text-align: center; line-height: 100px; float: left; margin-left: 20px; } .redBorder{ border: 1px solid red; } </style> <script src="jquery-2.2.4.js" type="text/javascript"></script></head><body><div class="box"> <div class="container">DIV</div> <div class="container">DIV</div> <div class="container">DIV</div></div></body><script> $(".container").on("click",this,function () { $(this).toggleClass("redBorder"); })</script></html>
4、点击一次选中,再次点击去掉选中,可以同时选中多个。
1 0
- jQuery实现div单选与多选
- jquery实现单选按钮选中与取消选中
- jquery checkbox 实现单选
- Jquery 实现checkbox单选
- Jquery实现checkbox单选
- JQuery复选框实现全选、单选
- Jquery模拟单选按钮与多选按钮
- jQuery实现radio的单选,和取消单选
- jQuery控制单选与复选按钮
- JQuery实现DIV的显示与隐藏
- PowerBuilder数据窗口实现单选与多选
- ListView实现CheckBox的单选与多选
- jquery实现复选框多选、单选、全不选功能,很实用
- JQuery实现三大控件方法,(下拉,单选,复选)
- JQuery实现三大控件方法,(下拉,单选,复选)
- jquery实现表格的全选 和单选
- ListView与CheckBox组合实现单选
- jQuery复选与单选(根据name绑定)
- Oracle时间格式的SQL语句
- jquery设置文本框默认文字消失效果2种
- 第一个仅出现一次的数组元素
- flex基础代码
- vlc插件详细使用说明
- jQuery实现div单选与多选
- Splash Screen加载网络图片实现欢迎页的两种方法
- 锂离子电池和燃料电池特性介绍
- C#查询数据库填充表格
- SQL获取最新一笔数据的两个查询方法
- ISE的一些笔记
- MySql解压缩版 配置过程
- 可叹-蒋梦婕
- #tensorflow学习笔记#tf.contrib.framework.get_or_create_global_step