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 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python生成词云的实现代码
2020/01/14 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
中间件分为哪几类
2012/03/14 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
英语故事演讲稿
2014/04/29 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
警示教育片观后感
2015/06/17 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android