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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
详解python tkinter 图片插入问题
2020/09/03 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
综合办公室主任职责
2013/12/16 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python