首页 > 代码库 > 使 用 Jquery 全选+下拉+单选+事件+挂事件

使 用 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 全选+下拉+单选+事件+挂事件