javascript 单选框,多选框美化代码


Posted in Javascript onAugust 01, 2008

javascript 单选框,多选框美化代码

crir = {
    init: function() {
        arrLabels = document.getElementsByTagName('label');

        searchLabels:
        for (var i=0; i<arrLabels.length; i++) {            
            // get the input element based on the for attribute of the label tag
            if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value != '') {
                labelElementFor = arrLabels[i].getAttributeNode('for').value;                
                inputElement = document.getElementById(labelElementFor);
            }
            else {                
                continue searchLabels;
            }    

            inputElementClass = inputElement.className;    

            // if the input is specified to be hidden intiate it
            if (inputElementClass == 'crirHiddenJS') {
                inputElement.className = 'crirHidden';

                inputElementType = inputElement.getAttributeNode('type').value;    

                // add the appropriate event listener to the input element
                if (inputElementType == "checkbox") {
                    inputElement.onclick = crir.toggleCheckboxLabel;
                }
                else {
                    inputElement.onclick = crir.toggleRadioLabel;
                }

                // set the initial label state
                if (inputElement.checked) {
                    if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_checked'}
                    else { arrLabels[i].className = 'radio_checked' }
                }
                else {
                    if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_unchecked'}
                    else { arrLabels[i].className = 'radio_unchecked' }
                }
            }
            else if (inputElement.nodeName != 'SELECT' && inputElement.getAttributeNode('type').value == 'radio') { // this so even if a radio is not hidden but belongs to a group of hidden radios it will still work.
                arrLabels[i].onclick = crir.toggleRadioLabel;
                inputElement.onclick = crir.toggleRadioLabel;
            }
        }            
    },    

    findLabel: function (inputElementID) {
        arrLabels = document.getElementsByTagName('label');

        searchLoop:
        for (var i=0; i<arrLabels.length; i++) {
            if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value == inputElementID) {                
                return arrLabels[i];
                break searchLoop;                
            }
        }        
    },    

    toggleCheckboxLabel: function () {
        labelElement = crir.findLabel(this.getAttributeNode('id').value);

        if(labelElement.className == 'checkbox_checked') {
            labelElement.className = "checkbox_unchecked";
        }
        else {
            labelElement.className = "checkbox_checked";
        }
    },    

    toggleRadioLabel: function () {             
        clickedLabelElement = crir.findLabel(this.getAttributeNode('id').value);

        clickedInputElement = this;
        clickedInputElementName = clickedInputElement.getAttributeNode('name').value;

        arrInputs = document.getElementsByTagName('input');

        // uncheck (label class) all radios in the same group
        for (var i=0; i<arrInputs.length; i++) {            
            inputElementType = arrInputs[i].getAttributeNode('type').value;
            if (inputElementType == 'radio') {
                inputElementName = arrInputs[i].getAttributeNode('name').value;
                inputElementClass = arrInputs[i].className;
                // find radio buttons with the same 'name' as the one we've changed and have a class of chkHidden
                // and then set them to unchecked
                if (inputElementName == clickedInputElementName && inputElementClass == 'crirHidden') {                
                    inputElementID = arrInputs[i].getAttributeNode('id').value;
                    labelElement = crir.findLabel(inputElementID);
                    labelElement.className = 'radio_unchecked';
                }
            }
        }

        // if the radio clicked is hidden set the label to checked
        if (clickedInputElement.className == 'crirHidden') {
            clickedLabelElement.className = 'radio_checked';
        }
    },

    addEvent: function(element, eventType, doFunction, useCapture){
        if (element.addEventListener) 
        {
            element.addEventListener(eventType, doFunction, useCapture);
            return true;
        } else if (element.attachEvent) {
            var r = element.attachEvent('on' + eventType, doFunction);
            return r;
        } else {
            element['on' + eventType] = doFunction;
        }
    }
}

crir.addEvent(window, 'load', crir.init, false);

在线演示http://img.3water.com/online/checkbox/sample.html

打包下载javascript 单选框,多选框美化代码CRIR.rar

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
javascript网页关键字高亮代码
Jul 30 #Javascript
用js生产批量批处理执行命令
Jul 28 #Javascript
javascript+xml技术实现分页浏览
Jul 27 #Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 #Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 #Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 #Javascript
js树形控件脚本代码
Jul 24 #Javascript
You might like
php安装swoole扩展的方法
2015/03/19 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
大专生简历的自我评价
2013/11/26 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
单身联谊活动方案
2014/01/29 职场文书
《猴子种树》教学反思
2014/02/14 职场文书