Форум программистов [Powered by Invision Power Board]

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">

label input{
    opacity: 0;
    _filter: alpha(opacity=0);
    position: absolute;
}

label{
    position: relative;
    display: block;
    float: left;
    clear: both;
    left: 100px;
    margin: 2px;
    -moz-user-select: none;
}

label .checkbox-img{
    position: absolute;
    left: 2px;
    top:  2px;
    width:  16px;
    height: 16px;
    background:transparent url(checkboxes.gif) no-repeat 0 0;
    background-position: 0 -16px;
}

label .checkbox-text{
    font: 11px/20px "Verdana";
    padding: 0 8px 0 20px;
}

label.on-focus {
    outline: 1px dotted #AAA;
}

label.checkbox .checkbox-img,
label.checkbox .unchecked { background-position: 0 -16px }
label.checkbox .checked   { background-position: 0 0 }

label.radio .checkbox-img,
label.radio .unchecked { background-position: 0 -112px }
label.radio .checked   { background-position: 0 -96px }

</style>
<script>

Array.prototype.forEach || (
Array.prototype.forEach = function (m, o) {
    for(var i = 0, l = this.length; i < l; i++)
        m.call(o, this[i], i, this)
})


///
// добавляет класс. третий аргумент не должен задаваться
// возвращает:
//    true  -- если класс был добавлен
//    false -- если класс уже существовал, или задана пустая строка
//

function addClass (e, c, f) {
    if( f = !! f || posClass(e, c) < 0 ) e.className += ' ' + c;
    return f
}

///
// добавляет отсутствующий класс или удаляет существующий
// возвращает:
//    true  -- если класс был добавлен
//    false -- если класс был удален
//

function flipClass (e, c) {
    return !delClass(e, c) && addClass(e, c, 1);
}

///
// удаляет класс
// возвращает:
//    true  -- если класс был удален
//    false -- если класс не был обнаружен
//

function delClass (e, c) {
    var s = e.className, i = posClass(e, c), f = i >= 0;
    if( f ) e.className = s.slice(0, i) + s.slice(i+c.length);
    return f
}

///
// позиция класса в className, -1 если класс не был обнаружен
//

function posClass (e, c) {
    return (' ' + e.className + ' ').indexOf(' ' + c + ' ')
}

///
// true если установлен класс, false если нет
//

function hasClass (e, c) {
    return posClass(e, c) >= 0
}

///
// если установлен класс a
//    заменяет класс a на класс b и возвращает добавленный класс
// иначе
//    заменяет класс b на класс a и возвращает добавленный класс
// иначе
//    возвращает пустую строку
//

function swapClass (e, a, b) {
    if( delClass(e, a) ) return addClass(e, b), b;
    if( delClass(e, b) ) return addClass(e, a), a;
    return ''
}

onload = function (){

    var onchange = function (e) {
        var event = e || window.event,
            self = event.target || event.srcElement,
            name = self.getAttribute('name');

        name && Array.prototype.forEach.call( document.getElementsByName(name), function (el) {
            var ico = el.nextSibling, checked = el.checked;
            delClass( ico, checked ? 'unchecked' : 'checked' );
            addClass( ico, checked ? 'checked' : 'unchecked' );
        });

        switch ( event.type ) {
            case 'focus': addClass( self.parentNode, 'on-focus' ); break;
            case 'blur' : delClass( self.parentNode, 'on-focus' ); break;
        };
    };

    Array.prototype.forEach.call( document.getElementsByTagName('input'), function (el) {
        var type = el.getAttribute('type');
        if( type == 'checkbox' || type == 'radio' ) {
            addClass(el.parentNode, type);
            ['onkeydown','onkeyup','onchange','onclick','onkeypress','onfocus','onblur'].forEach(
                function(func){ el[func] = onchange }
            )
            onchange({target:el});
        }
    });
}

</script>

<label for="chbox1"><input type="checkbox" name="chbox1" id="chbox1"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 1</span></label>
<label for="chbox2"><input type="checkbox" name="chbox2" id="chbox2"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 2</span></label>
<label for="chbox3"><input type="checkbox" name="chbox3" id="chbox3"><span class="checkbox-img"></span><span class="checkbox-text">checkbox 3</span></label>

<label for="radioA1"><input type="radio" name="radioA" checked="1"
                                                       id="radioA1"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 1</span></label>
<label for="radioA2"><input type="radio" name="radioA" id="radioA2"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 2</span></label>
<label for="radioA3"><input type="radio" name="radioA" id="radioA3"><span class="checkbox-img"></span><span class="checkbox-text">GROUP A - radio 3</span></label>


<label for="radioB1"><input type="radio" name="radioB" id="radioB1"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 1</span></label>
<label for="radioB2"><input type="radio" name="radioB" checked="1"
                                                       id="radioB2"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 2</span></label>
<label for="radioB3"><input type="radio" name="radioB" id="radioB3"><span class="checkbox-img"></span><span class="checkbox-text">GROUP B - radio 3</span></label>


<div id="display" style="position:absolute; bottom: 10px; right:10px">
</div>