How to manipulate the same function in javascript for two different classes?

I have to use two different sizes of checkbox on the same page. I'll determine which size to use based on the checkbox 'name'. If name='room' I'll use the big image of class 'custom-checkbox'. Else if name='request', I'll use small image of class 'custom-checkbox2'.

Now, how to modify below script so that it can determine which class to use based on the name of the checkbox please?

CSS

<style type="text/css">
    .custom-checkbox{
        width: 50px;
        height: 50px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 3px;
        background: url("../img/big-check-nopass.png") no-repeat;
    }
    .custom-checkbox:hover{
        background: url("../img/big-check-pass.png") no-repeat;
    }
    .custom-checkbox.selected{
        background: url("../img/big-check-pass.png") no-repeat;
    }
    .custom-checkbox input[type="checkbox"]{
        margin: 0;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
    /* Let's Beautify Our Form */

    label{
        display: block;
        padding: 2px 0;
    }

    /*for small cehckbox*/
    .custom-checkbox2{
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 3px;
        background: url("../img/small-check-nopass.png") no-repeat;
    }
    .custom-checkbox2:hover{
        background: url("../img/small-check-pass.png") no-repeat;
    }
    .custom-checkbox2.selected{
        background: url("../img/small-check-pass.png") no-repeat;
    }
    .custom-checkbox2 input[type="checkbox"]{
        margin: 0;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
    /* Let's Beautify Our Form */

    label2{
        display: block;
        padding: 2px 0;
    }

</style>

script

<script type="text/javascript">
    function customCheckbox(checkboxName){
        var checkBox = $('input[name="'+ checkboxName +'"]');
        $(checkBox).each(function(){
            $(this).wrap( "<span class='custom-checkbox'></span>" );
            if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
        });
        $(checkBox).click(function(){
            $(this).parent().toggleClass("selected");
        });
    }
    $(document).ready(function (){
        customCheckbox("room[]");
    })
</script>