css自定义复选框布局[关闭]

这样,您就不受CSS的约束,如果禁用Javascript,它将很好地降级为正常的复选框(对可访问性非常重要)

我写的这个脚本要求你为每个复选框都有一个div/span,其中类与相应的布局“选中”和“未选中”,每个复选框中都有一次onclick事件,代码如下('b_availcheck'是相应复选框的id):

<div class="checked" onclick="javascript:change_checkbox(this, 'b_availcheck');"></div>

function hide_checkboxes() {
    var checkboxes = document.getElementsByTagName('input');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
            checkboxes[i].style.visibility = 'hidden';
        }
    }
}

function change_checkbox(e, target) {
    if (e.className == 'checked') {
        document.getElementById(target).checked=false;
        e.className = 'unchecked';
    }
    else {
        document.getElementById(target).checked=true;
        e.className = 'checked';
    }
}

window.onload = hide_checkboxes;

fancy-form

如果您需要独立于浏览器的控件,请选择自定义控件。

看一看

jQuery custom styled checkbox

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements