整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、范围滑块选择 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小时内与您取得联系。
