这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了用原生 JS 实现简单的多选框功能, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
废话不多说了,直接给大家贴代码了,具体代码如下所示:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- </head>
- <body>
- <input id="cheakAll" type="checkbox">
- 全选
- <div>
- <input type="checkbox">
- <input type="checkbox">
- <input type="checkbox">
- <input type="checkbox">
- <input type="checkbox">
- </div>
- </body>
- </html>
- <script>
- //找到全选按钮
- var oChkAllBtn = document.getElementById('cheakAll');
- var oDiv = document.getElementsByTagName('div')[0];
- var aInput = oDiv.getElementsByTagName('input');
- var n = 0; //计数器
- //alert(aInput.length);
- //点击全选按钮,让其他的全部选中
- oChkAllBtn.onclick = function() {
- //判断我是什么状态
- /*if(this.checked==true){
- for(var i=0; i<aInput.length; i++){
- aInput[i].checked=true;
- }
- }else{
- for(var i=0; i<aInput.length; i++){
- aInput[i].checked=false;
- }
- }*/
- for (var i = 0; i < aInput.length; i++) {
- if (this.checked == true) { //判断全选按钮自己的状态
- aInput[i].checked = true;
- n = aInput.length; //控制计数器
- } else {
- aInput[i].checked = false;
- n = 0; //控制计数器
- }
- };
- };
- //--------------------------------------------
- //每一个按钮绑定事件
- for (var j = 0; j < aInput.length; j++) {
- aInput[j].onclick = function() {
- //如果我自己是cheaked状态 n++ 否则 n--
- if (this.checked == true) {
- n++;
- } else {
- n--;
- };
- //console.log(n);
- //如果n==aInput.length
- if (n == aInput.length) {
- oChkAllBtn.checked = true;
- } else {
- oChkAllBtn.checked = false;
- }
- };
- };
- </script>
以上所述是小编给大家介绍的用原生 JS 实现简单的多选框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0814/338723.html