整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、范圍滑塊選擇 ion.rangeSlider
ion.rangeSlider是一種簡單、靈活、范圍內選擇方便的滑塊選擇器。
它支持事件和公共方法，具有靈活的設置，可以用CSS來完全改變
跨瀏覽器支持（Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+）
支持主流的設備（iPhone, iPad, Nexus等）
主頁：https://github.com/IonDen/ion.rangeSlider
2、范圍選擇滑塊 Powerange
Powerange是一個范圍滑塊控件，首先它很容易定制，它完全都是由CSS和JavaScript組成。其次它包含許多功能，包括改變顏色和整體風格，水平和垂直的風格，自定義之間切換，最大值和初始值，自定義步驟的時間間隔，顯示十進制值，顯示而不是最小/最大號的圖標。
跨瀏覽器支持：谷歌瀏覽器14+，Mozilla Firefox瀏覽器6.0以上版本，歌劇11.6+，Safari 5以上版本，IE 9+
主頁：http://abpetkov.github.io/powerange/
3、按鈕切換開關 Switchery
Switchery是一個簡單的組件，它可以幫助你把你的默認的HTML復選框，只需要幾個簡單的步驟就設置為iOS 風格切換方式。您可以輕松地使用CSS自定義開關，使他們完美匹配您的設計。
支持所有主流瀏覽器（Chrome, Firefox, Opera, Safari, IE8+）
主頁：http://abpetkov.github.io/switchery/
4、彈窗插件 Sweet Alert
Sweet Alert 是一個替代傳統的 JavaScript Alert 的漂亮提示效果。SweetAlert 自動居中對齊在頁面中央，不管您使用的是臺式電腦，手機或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇，可以靈活控制。
主頁：http://t4t5.github.io/sweetalert/
5、通知插件 Toastr
toastr 是一個實現了類似 Android 的 Toast 提示的 jQuery 插件。
主頁：https://github.com/CodeSeven/toastr
6、頁面加載動畫SpinKit
spinkit使用CSS3的特性實現多種動畫效果，元素移動、放大縮小、翻轉、進度條加載效果等等，使用了很多CSS3新的特性。
主頁：https://github.com/tobiasahlin/SpinKit
演示網址：http://tobiasahlin.com/spinkit/
7、交互式圖表HighCharts
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在您的web網站或是web應用程序添加有交互性的圖表。目前HighCharts支持的圖表類型有：直線圖、曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖和散狀點圖等。它的顯示速度很快，看起來很雅致，并且界面漂亮。它含有大量的配置選項和可擴展性。一個組件系統可讓您未使用的功能壓縮到一個10kB的文件大小。它還具有良好的兼容性和可訪問性，當用戶在Javascrip 失效的情況下，或是使用早期版本的瀏覽器，瀏覽器仍然會重定向到圖片本身或事先指定的HTML頁。
主頁：http://www.highcharts.com/
8、焦點圖SuperSlide
SuperSlide 致力于解決網站大部分特效展示問題，使網站代碼規范整潔，方便維護更新。
網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動”“無縫滾動”等只需要一個SuperSlide即可解決！
從此無需網上苦苦尋覓特效，無需加載n個插件，無需害怕代碼沖突，你需要的只是一個SuperSlide！
還可以多個SuperSlide組合創造更多效果哦~（兼容包括ie6的絕大部分瀏覽器）
下面這個圖上使用了5種以上相應的效果，只引用了一次插件
主頁：http://www.superslide2.com/
PS：官網介紹包括的擴展效果，是用SuperSlide制作的，有些特殊的效果會加少量js，如果你熟練掌握SuperSlide，你也可以制作一模一樣的效果，甚至更好。對于剛剛接觸的朋友，如果真的不想自己研究，請留下郵箱，我抽時間會一一發送。
9、jquery.cookie
一個簡單的，輕量級的jQuery插件用于讀取，寫入和刪除的cookie。
主頁：https://github.com/carhartl/jquery-cookie
10、Custombox
Custombox是基于 CSS3 過渡功能實現的 jQuery 模式窗口插件。有許多效果，如淡入，滑動，模糊，翻轉，旋轉等等。截圖不能突出效果，強烈推薦看看演示。
主頁：https://github.com/dixso/custombox
演示地址：http://dixso.github.io/custombox/
這次就介紹這10款吧，其實我認為，所有插件、控件都是讓我們在開發過程中盡可能縮短時間的工具，“工欲善其事，必先利其器”，可能真正的“牛人”都是自己需要什么寫什么，但是大多數開發者可能還達不到那種境界，亦或者不愿意浪費那個時間和精力，所以，收集自己會使用或者常用的工具，何樂而不為呢。謝謝支持，下次繼續。
同于服務器端腳本語言，例如php與ASP，Javascript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。而隨著服務器的強壯，雖然程序員更喜歡運行于服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。
Web前端教程
需求分析
商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品
技術分析
checked="checked"選擇復選框
事件:onclick點擊事件
getElementsByTagName：返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。
getElementsByName：返回包含帶有指定類名的所有元素的節點列表。
步驟分析
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
代碼實現
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<!--
1.確定事件:文檔加載完成onload
2.事件要觸發函數:init()
3.函數:操作頁面的元素
要操作表格中每一行
動態的修改行的背景顏色
-->
<script>
functioninit(){
//得到表格
vartab=document.getElementById("tab");
//得到表格中每一行
varrows=tab.rows;
//便利所有的行,然后根據奇數偶數
for(vari=1;i<rows.length;i++){
varrow=rows[i];//得到其中的某一行
if(i%2==0){
row.bgColor="yellow";
}else{
row.bgColor="red"
}
}
}
/*
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
*/
functioncheckAll(){
// 獲得當前第一個checkbox的狀態
varcheck1=document.getElementById("check1");
//得到當前checked狀態
varchecked=check1.checked;
// 獲得所有分類項的checkbox
// varchecks=document.getElementsByTagName("input");
varchecks=document.getElementsByName("checkone");
// alert(checks.length);
for(vari=0;i<checks.length;i++){
// 修改每一個checkbox的狀態
varcheckone=checks[i];
checkone.checked=checked;
}
}
</script>
</head>
<bodyonload="init()">
<tableborder="1px"width="600px"id="tab">
<tr>
<td>
<inputtype="checkbox"onclick="checkAll()"id="check1"/>
</td>
<td>分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<ahref="#">修改</a>|<ahref="#">刪除</a>
</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這里面的充氣電動硅膠的</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣椒,麻花,黃瓜</td>
<td>年貨</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
</table>
</body>
</html>
JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差，而且在JavaScript中，如果一條運行不了，那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯，加載后，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢。
以上是酷仔今日整理的“前端教程：使用JavaScript完成復選框的全選和全不選”一文，希望為正在學習Web前端的同學提供參考。
果您覺得該文章對您有幫助，讓更多人受用，請關注“鍵盤碼農”，轉發該文章。謝謝您的支持！
今天跟大家寫了一份js的聯動全選的源碼，代碼少，清晰易懂。
效果是這樣的：
點擊全選下面的就會被全部全選，或者下面的被一一選擇，全選按鈕也會被選中。運用復選框來實現的聯動全選的功能。
點擊上面的復選框就會被全選
Javascript：聯動全選
當下放的復選框沒有被全選，最上面的全選按鈕未被選中
復選框聯動全選js代碼實現：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function ()
{
var oBtn1=document.getElementById('btn1');
var oBox=document.getElementById('box');
var oInputs=oBox.getElementsByTagName('input');
oBtn1.onclick=function ()
{
if (oBtn1.checked==true) {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=true;
}
} else {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=false;
}
}
}
//點擊每一個input框
for (var i=0; i < oInputs.length; i++) {
oInputs[i].onclick=function ()
{
var n=0;
for (var i=0; i < oInputs.length; i++) {
if (oInputs[i].checked==true) {
n++;
}
}
if (n==oInputs.length) {
oBtn1.checked=true;
} else {
oBtn1.checked=false;
}
}
}
}
</script>
</head>
<body>
<h1>全選/全不選</h1>
<input type="checkbox" id="btn1">
<div id="box">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
</html>
相對比較簡單，對于初學者應該有很好的幫助！請關注鍵盤碼農。后期繼續更新，如有什么看法請在下方評論。第一時間為您解答哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
