jquery寫個(gè)checkbox——類似郵箱全選功能
更新時(shí)間：2013年03月19日 15:02:57 作者：
最近在學(xué)習(xí)jquery，今天抽空用jquery寫個(gè)checkbox——類似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你
以前用原生 JS 寫過 checkbox——類似郵箱全選功能，點(diǎn)擊這里。最近在學(xué)習(xí)jquery，今天抽空用jquery 寫個(gè)checkbox——類似郵箱全選功能。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
</head>
<body>
<input type="checkbox" name="btn" id="btn"/><label for="btn">全選/全不選</label><br/>
<input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">選項(xiàng)1</label><br/>
<input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">選項(xiàng)2</label><br/>
<input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">選項(xiàng)3</label><br/>
<input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">選項(xiàng)4</label><br/>
<input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">選項(xiàng)5</label><br/>
<input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">選項(xiàng)6</label><br/>
<input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">選項(xiàng)7</label><br/>
<input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">選項(xiàng)8</label><br/>
<input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">選項(xiàng)9</label><br/>
<input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">選項(xiàng)10</label><br/>
<a href="javascript:;" id="btn2">反選</a>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var checkboxes = $('input[name=choose]');
var btn = $('#btn');
var btn2 = $('#btn2');
btn.click(function(){
checkboxes.attr('checked',this.checked);
});
checkboxes.click(function(){
var flag = true;
checkboxes.each(function(){
if(!this.checked) flag = false;
});
btn.attr('checked',flag);
});
btn2.click(function(){
var flag = true;
checkboxes.each(function(){
this.checked = !this.checked;
if(!this.checked) flag = false;
});
btn.attr('checked',flag);
});
});
</script>
小提示：如果使用 jquery，則需要引入 jquery 庫。
PS：以上是本人通過所學(xué)的 jquery 知識(shí)，隨意寫的一些效果。
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
</head>
<body>
<input type="checkbox" name="btn" id="btn"/><label for="btn">全選/全不選</label><br/>
<input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">選項(xiàng)1</label><br/>
<input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">選項(xiàng)2</label><br/>
<input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">選項(xiàng)3</label><br/>
<input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">選項(xiàng)4</label><br/>
<input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">選項(xiàng)5</label><br/>
<input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">選項(xiàng)6</label><br/>
<input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">選項(xiàng)7</label><br/>
<input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">選項(xiàng)8</label><br/>
<input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">選項(xiàng)9</label><br/>
<input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">選項(xiàng)10</label><br/>
<a href="javascript:;" id="btn2">反選</a>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var checkboxes = $('input[name=choose]');
var btn = $('#btn');
var btn2 = $('#btn2');
btn.click(function(){
checkboxes.attr('checked',this.checked);
});
checkboxes.click(function(){
var flag = true;
checkboxes.each(function(){
if(!this.checked) flag = false;
});
btn.attr('checked',flag);
});
btn2.click(function(){
var flag = true;
checkboxes.each(function(){
this.checked = !this.checked;
if(!this.checked) flag = false;
});
btn.attr('checked',flag);
});
});
</script>
小提示：如果使用 jquery，則需要引入 jquery 庫。
PS：以上是本人通過所學(xué)的 jquery 知識(shí)，隨意寫的一些效果。
您可能感興趣的文章:
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
- jquery無刷新驗(yàn)證郵箱地址實(shí)現(xiàn)實(shí)例
- jQuery 實(shí)現(xiàn)自動(dòng)填充郵箱功能（帶下拉提示）
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jQuery實(shí)現(xiàn)Email郵箱地址自動(dòng)補(bǔ)全功能代碼
- jquery驗(yàn)證郵箱格式是否正確實(shí)例講解
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能
相關(guān)文章
jquery實(shí)現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery 檢查某個(gè)元素在頁面上是否存在實(shí)例代碼
這篇文章主要介紹了jQuery 檢查某個(gè)元素在頁面上是否存在實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
jQuery EasyUI API 中文文檔 - Tree樹使用介紹
jQuery EasyUI API 中文文檔 - Tree樹使用介紹，需要的朋友可以參考下。2011-11-11
jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下2015-02-02
Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇，頭部選項(xiàng)，如全選/ 取消全選 /關(guān)閉功能,支持鍵盤選擇等等，下面與大家分享下具體使用2013-05-05
這篇文章主要介紹了jQuery彈出div層過2秒自動(dòng)消失的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
下面小編就為大家?guī)硪黄胘Query實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會(huì)對(duì)這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。2017-08-08
jQuery中用on綁定事件時(shí)需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時(shí)需注意的事項(xiàng)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄薷膉query中dialog的title屬性方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08