Jquery練習
文章目錄
- 給全選綁定單擊事件
- 給全不選綁定單擊事件
- 反選單擊事件
- 【送出】按鈕單擊事件
- 給【全選/全不選】綁定單擊事件
- 給球類綁定單擊事件
給全選綁定單擊事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
給全不選綁定單擊事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked",false);
})
反選單擊事件
$("#checkedRevBtn").click(function () {
//查詢全部的球類的複選框
$(":checkbox[name='items']").each(function () {
// 在each周遊的function函數中，有一個this對象。這個this對象是目前正在周遊到的dom對象
this.checked = !this.checked;
});
//
//要檢查 是否滿選
var allCount = $(":checkbox[name='items']").length;
//在擷取選中的球類的個數
var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
// $("#checkedAllBox").prop("checked",true);
// } else {
// $("#checkedAllBox").prop("checked",false);
// }
$("#checkedAllBox").prop("checked", allCount == checkedCount);
});
【送出】按鈕單擊事件
$("#sendBtn").click(function () {
//擷取選中的球類的複選框
$(":checkbox[name='items']:checked").click(function () {
alert(this.value);
})
});
給【全選/全不選】綁定單擊事件
$("#checkedAllBox").click(function () {
//在事件function函數中, 有一個this對象 這個this對象 就是目前相應事件的dom對象
$(":checkbox[name='items']").prop("checked", this.checked);
})
給球類綁定單擊事件
$(":checkbox[name='items']").click(function () {
//要檢查 是否滿選
//擷取全部的球類個數
// 擷取全部的球類個數
var allCount = $(":checkbox[name='items']").length;
// 再擷取選中的球類個數
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked", allCount == checkedCount);
})
完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function () {
//給全選綁定單擊事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
})
//給全不選綁定單擊事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
})
//反選單擊事件
$("#checkedRevBtn").click(function () {
//查詢全部的球類的複選框
$(":checkbox[name='items']").each(function () {
// 在each周遊的function函數中，有一個this對象。這個this對象是目前正在周遊到的dom對象
this.checked = !this.checked;
});
//
//要檢查 是否滿選
var allCount = $(":checkbox[name='items']").length;
//在擷取選中的球類的個數
var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
// $("#checkedAllBox").prop("checked",true);
// } else {
// $("#checkedAllBox").prop("checked",false);
// }
$("#checkedAllBox").prop("checked", allCount == checkedCount);
});
//【送出】按鈕單擊事件
$("#sendBtn").click(function () {
//擷取選中的球類的複選框
$(":checkbox[name='items']:checked").click(function () {
alert(this.value);
})
});
給【全選/全不選】綁定單擊事件
$("#checkedAllBox").click(function () {
//在事件function函數中, 有一個this對象 這個this對象 就是目前相應事件的dom對象
$(":checkbox[name='items']").prop("checked", this.checked);
})
//給球類綁定單擊事件
$(":checkbox[name='items']").click(function () {
//要檢查 是否滿選
//擷取全部的球類個數
// 擷取全部的球類個數
var allCount = $(":checkbox[name='items']").length;
// 再擷取選中的球類個數
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked", allCount == checkedCount);
})
})</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox"/>全選/全不選
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 選"/>
<input type="button" id="checkedNoBtn" value="全不選"/>
<input type="button" id="checkedRevBtn" value="反 選"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)