jQuery CheckBox全選、全不選實現代碼小結
更新時間：2010年04月30日 10:46:04 作者：
jQuery CheckBox全選、全不選實現代碼小結，對于操作jquery的朋友可以參考下。
直接上代碼。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面的代碼比較全，是基于js的控制原理實現
<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的控制原理實現
復制代碼 代碼如下:
<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>
相關文章
這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對大家有所幫助2014-11-11
jQuery插件Zclip實現完美兼容個瀏覽器點擊復制內容到剪貼板
本文將結合實例講解如何使用一款基于jQuery的插件——Zclip來實現復制內容到剪貼板的功能。其實IE上有個方法可以實現點擊復制，但是由于只是IE獨有，所以我們不提倡。而Zclip是利用一個隱藏的flash文件來完成復制的功能，關鍵是它兼容當前各主流瀏覽器。2015-04-04
這篇文章主要介紹了jQuery自帶的一些常用方法總結,包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了jQuery多級彈出菜單插件ZoneMenu的使用方法，有需要的小伙伴可以參考下2014-12-12
這篇文章主要介紹了使用jQuery管理選擇結果的相關資料,需要的朋友可以參考下2015-01-01
使用ajax在前端驗證是否執(zhí)行某個操作，下面為大家介紹下jquery.post的具體使用2014-01-01
jquery簡單導航實現代碼，需要的朋友可以參考下。2009-09-09
今天小編就為大家分享一篇關于jquery的$().each和$.each的區(qū)別，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
在jQuery 中$("<span>")，這個語法等同于$(document.createElement("span")) ，這是一種用法2011-04-04
這篇文章主要介紹了jQuery使用$.each遍歷json數組的簡單實現方法,結合實例形式分析了each方法遍歷json數組的實現技巧與相關注意事項,需要的朋友可以參考下2016-04-04