javascript - 在不使用插件的情况下用 jQuery 中的图像替换复选框的简单方法

Question

我想用图像替换复选框，但是我遇到的只是 jQuery 插件。这样的功能是否可以通过几行而不是插件来实现？

谢谢。

Answer 1

这是我的看法，您需要两个图像 imgOn 和 imgOff 来表示复选框的选中和未选中状态。这需要设置每个复选框的 ID 属性，以便在单击图像时对其进行修改。

<ul>
   <li><input type="checkbox" id="chk1" checked="checked"/> Check 01</li>
   <li><input type="checkbox" id="chk2"/> Check 02</li>
</ul>   
<script type="text/javascript">
    var imgOn='imgOn.png';
    var imgOff='imgOff.png';
    $(function(){
        $("input:checkbox").each(function(){            
    $(this).css("display","none");
    if($(this).is(":checked")){ 
        $(this).after($(document.createElement("img"))
        .attr({src:imgOn,title:'Checkbox',id:$(this).attr("id")})
            .addClass("chkBoxImg"));
    }else{
        $(this).after($(document.createElement("img"))
        .attr({src:imgOff, title:'Checkbox',id:$(this).attr("id")})
        .addClass("chkBoxImg"));
    }});
    $("img.chkBoxImg").click(function(){
        i= "input#"+$(this).attr("id")+":checkbox";
        alert($(i).attr("checked"));
        s=$(this).attr("src");
        if(s==imgOn){
            $(this).attr("src",imgOff);
        $(i).attr("checked",false);
        }else{
        $(this).attr("src",imgOn);
        $(i).attr("checked",true);
        }});
});
</script>