使 用 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>
复制代码

 

posted @   遇事稳坐钓鱼台  阅读(380)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手