$(document).ready(function () {
//实现全选反选
$("input[id='selectall']").on('click', function() {
$("input[name='chk']").prop("checked", $(this).prop('checked'));
})
$("#div1 input[name='chk']").on('click', function() {
//当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
if($("#div1 input[name='chk']").length === $("#div1 input:checked").length) {
$("input[id='selectall']").prop("checked", true);
} else {
$("input[id='selectall']").prop("checked", false);
}
})
<input type="checkbox" id="selectall">one <br>
<div id="div1">
<input type="checkbox" name="chk">two <br>
<input type="checkbox" name="chk">three <br>
<input type="checkbox" name="chk">four <br>
<input type="checkbox" name="chk">five <br>
<input type="checkbox" name="chk">six <br>
</div>
奇偶变色
$(document).ready(function () {
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","blue");
$("tr:last").css("font-weight","bold");
$("tr:eq(1)").css("background-color","green");
$("tr:eq(2)").css("background-color","orange");
$("td:even").css("opacity","0.2")
})
图片切换
$(function () {
$("#btn1").click(function () {
$("#img1").attr("src","images/xiammisuzu1.jpg");
});
$("#btn2").click(function () {
$("#img1").attr("src","images/xiaomishuzu2.jpg");
});
$("#btn3").click(function () {
$("#img1").attr("src","images/xiaomishuzu3.jpg");
});
$("#btn4").click(function () {
$("#img1").removeAttr("src");
});
$("#btn5").click(function () {
$("#img1").toggle(5000,"linear",function () {
alert("图片切换完成1");
});
/*$("#img1").toggle(function () {
alert("图片切换完成1");
});*/
});
$("#btn6").click(function () {
$("#img1").toggle(8000,"swing",function () {
alert("图片切换完成2");
})
})
});
<img src="images/xiaomishuzu4.jpg" width="610" height="300" id="img1"><br>
<input type="button" id="btn1" value="切到图片1">
<input type="button" id="btn2" value="切到图片2">
<input type="button" id="btn3" value="切到图片3">
<input type="button" id="btn4" value="移除图片">
<input type="button" id="btn5" value="隐藏/显示图片1">
<input type="button" id="btn6" value="隐藏/显示图片2">
