将图像添加到html类型输入复选框或收音机

Question

将图像添加到html类型输入复选框或收音机

f1w*_*ade 3 html checkbox types input radio

我正在尝试指定一个图像,用于我的未检查和检查的html输入类型复选框和无线电的值.

我有这个:

background: url("image.png") no-repeat;

Run Code Online (Sandbox Code Playgroud)

但它似乎不适用于收音机和仅复选框按钮.

有谁知道一些有用的东西？

Answer 1

f1w*_*ade 5

我找到并找到了答案.在这些论坛的帮助下 http://forums.digitalpoint.com/showthread.php?t=665980

所有代码如下:您可以复制到单个文件并添加自己的图像,它将工作.

<html>
<script type="text/javascript">
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = '52 0 ROff.png';
var imgTrue = '52 0 ROn.png';

//replace the checkbox with an image and setup events to handle it
function replaceChecks() {
    //get all the input fields on the page
    inputs = document.getElementsByTagName('input');

    //cycle trough the input fields
    for(var i=0; i<inputs.length; i++) {

    //check if the input is a checkbox
    if(inputs[i].getAttribute('type') == 'checkbox') {

        //create a new image
        var img = document.createElement('img');

        //check if the checkbox is checked
        if(inputs[i].checked) {
            img.src = imgTrue;
        } else {
            img.src = imgFalse;
        }

        //set image ID and onclick action
        img.id = 'checkImage'+i;
        //set image
        img.onclick = new Function('checkClick('+i+')');

        //place image in front of the checkbox
        inputs[i].parentNode.insertBefore(img, inputs[i]);

        //hide the checkbox
        inputs[i].style.display='none';
    }
}
}

//change the checkbox status and the replacement image
function checkClick(i) {
if(inputs[i].checked) {
    inputs[i].checked = '';
    document.getElementById('checkImage'+i).src=imgFalse;
} else {
    inputs[i].checked = 'checked';
    document.getElementById('checkImage'+i).src=imgTrue;
}
}

</script>
</html>
<body>
<input type="checkbox" />
<script type="text/javascript">replaceChecks();</script>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	27301 次
最近记录：	11 年，6 月前