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.jb51.net/online/checkbox/sample.html

打包下载CRIR.rar

(0)

相关推荐

  • jquery对单选框,多选框,文本框等常见操作小结

    一.文本框.单选按钮.复选框.相关操作 复制代码 代码如下: var sex=$("input[name='sex']:checked").val();   //获取一组radio被选中项的值  var item=$("#sel option:selected").text();      //获取select被选中项的文本  var option_num=$('#sel').val();                 //获取select项目索引 $("

  • jQuery 获取多选框的值及多选框中文的函数

     DOM结构 我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述. <label class="input_checkbox"> <input type="checkbox" name="sell_area" vlaue="0"> <span>甘肃</span> </label> <label class="input_checkbox

  • jquery中表单 多选框的一种巧妙写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> &l

  • jQuery实现的多选框多级联动插件

    jQuery 实现的多选框联动插件 复制代码 代码如下: // 使用:$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性"name"和选中<option>的属性"value" // 后台用json格式传输数据 // 格式: { value:<option>的属性"value", text:<option&g

  • jQuery对下拉框,单选框,多选框的操作

    下拉框: //得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".formc select[@name='country'] option[@selected]").text();//得到下拉菜单的选中项的值var cc2 = $('.formc select[@name="country"]').val();//得到下拉菜单的选中项的ID属性值var cc3 = $('.formc select[@name="country"

  • jquery select多选框的左右移动 具体实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&quo

  • ExtJS Grid使用SimpleStore、多选框的方法

    复制代码 代码如下: ///<reference path="./vswd-ext_2.0.2.js" /> Ext.onReady(function(){ var data = [ [1,"wilson.fu",10], [2,"wilson.fu2",20], [3,"wilson.fu3",30] ]; var sqldata = new Array() ; for(var i=0;i<10;i++)

  • Jquery多选框互相内容交换的实例代码

    复制代码 代码如下: <head runat="server">    <title>无标题页</title>    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript">        $(docume

  • 简单实现jQuery多选框功能

    Jquery多选框的基本操作:支持全选.反选.取消全选的功能 HTML正文: <input type="checkbox" id="c1">全选/全不选<br> 兴趣爱好:<br> <input type="checkbox" name="interst" value="basketball">篮球 <input type="checkbox&

  • jQuery中实现prop()函数控制多选框(全选,反选)

    今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":checkbox").prop("checked"); //如果第一个checkbox被选中返回true,否则返回false. 禁用和选中页面上的所有复选框: $("input[type='checkbox']").prop("disabled"

随机推荐