先引用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 全选+下拉+单选+事件+挂事件的更多相关文章

  1. jquery全选+下拉+单选+事件+挂事件

    1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...

  2. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  3. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  4. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  6. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  7. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  8. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  9. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

随机推荐

  1. Kubernetes 编排系统

    1.1 Kubernetes简介 1.1.1 什么是Kubernetes Kubernetes (通常称为K8s,K8s是将8个字母“ubernete”替换为“8”的缩写) 是用于自动部署.扩展和管理 ...

  2. 微软BI 之SSIS 系列 - 使用 Multicast Task 将数据同时写入多个目标表，以及写入Audit 与增量处理信息

    开篇介绍 在 SSIS Data Flow 中有一个 Multicast 组件,它的作用和 Merge, Merge Join 或者 Union All 等合并数据流组件对比起来作用正好相反.非常直观 ...

  3. 2017 33 款iOS开源库

    IGListKit https://github.com/Instagram/IGListKit 由 Instagram 开发人员制作,IGListKit 是用于构建快速灵活列表的数据驱动型的 UIC ...

  4. SNF快速开发平台MVC-Grid++集成打印

    一.显示效果: 二.程序实现: 1.先要在 打印模版程序 给指定页面进行在线设计打印模版 2.在使用的程序当中,增加如下代码即可.程序上是可以挂多个打印模版的,程序页面的代码不用动直接可以读取到打印模 ...

  5. MeasureSpec 的三中类型

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu ...

  6. Linux判断文件是否为空，不为空则打印该文件的大小

    Linux判断文件是否为空,不为空则打印该文件的大小,使用到的命令是-s + filename -s filename 如果文件大小大于0,则返回true. 例如: 查看当前目录 # ls -l to ...

  7. 【论文笔记】使用SPSS 进行 T Test （T检验）

    从具有t值来看,你是在进行T检验.T检验是平均值的比较方法. T检验分为三种方法: 1. 单一样本t检验(One-sample t test),是用来比较一组数据的平均值和一个数值有无差异.例如,你选 ...

  8. Git的使用（一）

    最近在解除git的使用,开始觉得git某些地方还是挺方便的. 1.svn的话管理起来是比较方便,可是断网的话,会用不了 2.git的话,管理一些开源的东西比较方便,并且比较好管理日常写的demo程序, ...

  9. 【iCore1S 双核心板_FPGA】例程二：GPIO输入实验——识别按键输入

    实验现象: iCore1s 双核心板上与FPGA相连的三色LED(PCB上标示为FPGA·LED),按键按下红灯点亮,松开按键红灯熄灭. 核心源代码: module KEY( input CLK_12 ...

  10. (笔记)Linux内核学习(三)之进程调度

    进程调度: 在可运行态进程之间分配有限处理器时间资源的内核子系统. 一 调度策略 1 进程类型 I/O消耗型进程:大部分时间用来提交I/O请求或是等待I/O请求,经常处于可运行状态,但运行时间短,等待 ...