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 相关文章推荐
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue项目中使用百度地图的方法
2018/06/08 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python实现简单登录验证
2016/04/13 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
如何使用Python调整图像大小
2020/09/26 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
司马光教学反思
2014/02/01 职场文书
个人担保书格式范文
2014/05/12 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
MySQL 如何设计统计数据表
2021/06/15 MySQL
golang生成vcf通讯录格式文件详情
2022/03/25 Golang