jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)
更新時間：2010年04月30日 10:46:04 作者：
jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)，對于操作jquery的朋友可以參考下。
直接上代碼。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面的代碼比較全，是基于js的控制原理實現(xiàn)
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script>
<script type="text/javascript">
//全選
function CheckedAll(){
$(':checkbox').attr('checked','checked');
}
//全不選
function CheckedNo(){
$(':checkbox').attr('checked','');
}
//反選
function CheckedRev(){
var arr = $(':checkbox');
for(var i=0;i<arr.length;i++){
arr[i].checked = ! arr[i].checked;
}
}
</script>
<body>
<div>
<input id="CheckAll" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
</div>
<input type="button" name="btnCheckedAll" value="全 選" onclick="javascript:CheckedAll();" />
<input type="button" name="btnCheckedNo" value="全不選" onclick="javascript:CheckedNo();" />
<input type="button" name="btnCheckedRev" value="反 選" onclick="javascript:CheckedRev();" />
</body>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面的代碼比較全，是基于js的控制原理實現(xiàn)
復(fù)制代碼 代碼如下:
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script>
<script type="text/javascript">
//全選
function CheckedAll(){
$(':checkbox').attr('checked','checked');
}
//全不選
function CheckedNo(){
$(':checkbox').attr('checked','');
}
//反選
function CheckedRev(){
var arr = $(':checkbox');
for(var i=0;i<arr.length;i++){
arr[i].checked = ! arr[i].checked;
}
}
</script>
<body>
<div>
<input id="CheckAll" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
<input name="subBox" type="checkbox" />
</div>
<input type="button" name="btnCheckedAll" value="全 選" onclick="javascript:CheckedAll();" />
<input type="button" name="btnCheckedNo" value="全不選" onclick="javascript:CheckedNo();" />
<input type="button" name="btnCheckedRev" value="反 選" onclick="javascript:CheckedRev();" />
</body>
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對大家有所幫助2014-11-11
jQuery插件Zclip實現(xiàn)完美兼容個瀏覽器點(diǎn)擊復(fù)制內(nèi)容到剪貼板
本文將結(jié)合實例講解如何使用一款基于jQuery的插件——Zclip來實現(xiàn)復(fù)制內(nèi)容到剪貼板的功能。其實IE上有個方法可以實現(xiàn)點(diǎn)擊復(fù)制，但是由于只是IE獨(dú)有，所以我們不提倡。而Zclip是利用一個隱藏的flash文件來完成復(fù)制的功能，關(guān)鍵是它兼容當(dāng)前各主流瀏覽器。2015-04-04
這篇文章主要介紹了jQuery自帶的一些常用方法總結(jié),包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了jQuery多級彈出菜單插件ZoneMenu的使用方法，有需要的小伙伴可以參考下2014-12-12
這篇文章主要介紹了使用jQuery管理選擇結(jié)果的相關(guān)資料,需要的朋友可以參考下2015-01-01
使用ajax在前端驗證是否執(zhí)行某個操作，下面為大家介紹下jquery.post的具體使用2014-01-01
jquery簡單導(dǎo)航實現(xiàn)代碼，需要的朋友可以參考下。2009-09-09
今天小編就為大家分享一篇關(guān)于jquery的$().each和$.each的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
在jQuery 中$("<span>")，這個語法等同于$(document.createElement("span")) ，這是一種用法2011-04-04
jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法
這篇文章主要介紹了jQuery使用$.each遍歷json數(shù)組的簡單實現(xiàn)方法,結(jié)合實例形式分析了each方法遍歷json數(shù)組的實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-04-04