使 用 Jquery 全选+下拉+单选+事件+挂事件
先引用Jquery代码包
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入JQUERY包-->
<script src="../jquery-1.11.2.min.js"></script> <style type="text/css"> </style> <title>无标题文档</title>
</head> <body>
1.全选
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取下拉" id="b1" /> <script type="text/javascript"> $("#b1").click(function(){
alert($("#sel").val());
})
</script>
2.下拉菜单
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取下拉" id="b1" /> <script type="text/javascript"> $("#b1").click(function(){
alert($("#sel").val());
})
</script>
3.单选
<input type="radio" value="01" class="rd" name="a"/>
<input type="radio" value="02" class="rd" name="a" />
<input type="radio" value="03" class="rd" name="a" />
<input type="radio" value="04" class="rd" name="a" />
<input type="radio" value="05" class="rd" name="a" />
<input type="button" value="取单选" id="b2" /> <script type="text/javascript"> $("#b2").click(function(){
var rd = $(".rd");
for(var i=0;i<rd.length;i++)
{
if(rd[i].checked)
{
alert(rd[i].value);
}
}
})
</script>
4.加事件
<style type="text/css">
.aaa{ width:150px; height:150px; background-color:#06F}
</style> <body>
<div class="aaa">111111</div>
<div class="aaa">222222</div>
<div class="aaa">333333</div>
</body> <script type="text/javascript">
$(document).ready(function(e) {
$(".aaa").click(function(){
$(".aaa").css("background-color","#06f");
$(this).css("background-color","red");
})
});
</script>
5.挂事件
<input type="button" value="挂事件" id="btn" />
<input type="button" value="移除事件" id="btn1" />
<div id="a" style="width:100px; height:100px">cccc</div> <script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
$("#a").bind("click",function(){
$("#a").css("background-color","red");
alert("事件");
})
})
$("#btn1").click(function(){
$("#a").unbind("click");
})
});
</script>
使 用 Jquery 全选+下拉+单选+事件+挂事件的更多相关文章
- jquery全选+下拉+单选+事件+挂事件
1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值
Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
- pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
随机推荐
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
- V-rep学习笔记:机器人路径规划2
路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全.无碰撞地通过所有的障碍物而达到目标位置 ...
- 基于Ubuntu搭建Seafile专属网盘
系统要求: Ubuntu 16.04.1 LTS 64 位操作系统 安装 Seafile 服务器 安装依赖环境 在 Debian/Ubuntu 系统下,可以使用以下命令安装 MySQL: sudo a ...
- String为什么是不可变的?
面试官Q1:请问为什么String是不可变的,能谈谈吗? 我们知道不管是面试初级.中级还是高级Java开发工程师,String永远都是一个绕不开的话题,而且问的问题也是各不相同,下面我们从几个角度来看 ...
- xcode9 报错 “Swift Language Version” (SWIFT_VERSION) build setting must be set to a supported value for targets which use Swift
用xcode编译后会出现这个错误的情况: 1.使用cocopod导入第三方swift包后,swift的包是比较老的swift开发的. 2.用xcode9 打开老的swift(比如swift2.0)的工 ...
- SpringCloud服务间调用
SpringCloud服务间的调用有两种方式:RestTemplate和FeignClient.不管是什么方式,他都是通过REST接口调用服务的http接口,参数和结果默认都是通过jackson序列化 ...
- php验证码--图片
这里我们介绍图片验证码的制作,有关字符验证码能够參考下面文章: 点击打开链接 图片验证码的制作分三步: 1.制作图片库 2.随机选取一张图片 3.输出图片内容 代码例如以下(这里为了方便我直接用的本地 ...
- java中使用队列:java.util.Queue(转)
队列是一种特殊的线性表,是运算受到限制的一种线性表,只允许在表的一端进行插入,而在另一端进行删除元素的线性表.队尾(rear)是允许插入的一端.队头(front)是允许删除的一端.空队列是不含元素的空 ...
- 一道简单的HashMap面试题所想到的...
前言 看到一个JDK1.7和JDK1.8中关于HashMap的一个面试题: JDK1.7和1.8中HashMap中链表的插入的方式有什么不同? 原以为自己对HashMap的源码理解的还算可以了,应该足 ...
- tail -f 实时查看日志文件 linux查看日志后100行
tail -f 实时查看日志文件 tail -f 日志文件logtail - 100f 实时查看日志文件 后一百行tail -f -n 100 catalina.out linux查看日志后100行搜 ...