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

时间:2022-10-30 20:02:48

1.全选

<body>
<input type="checkbox" id="qx" /> 全选
<input type="checkbox" value="01" class="ck" />
<input type="checkbox" value="02" class="ck" />
<input type="checkbox" value="03" class="ck" />
<input type="checkbox" value="04" class="ck" />
<input type="checkbox" value="05" class="ck" />
</body> <script type="text/javascript">
$("#qx").click(function(){
var xz = $(this).prop("checked");//设置($this)这个全选按钮自身的属性是"checked"
var ck = $(".ck").prop("checked",xz);//xz放入之前的prop里的属性为ture
})
</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>

加事件

<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>

挂事件

<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>