如何在javascript中为两个不同的类操作相同的函数

我必须在同一页上使用两种不同大小的复选框。我将根据复选框

name

确定要使用的大小。如果

name='room'

我将使用“自定义复选框”类的大图。否则，如果

name='request'

，我将使用类

custom-checkbox2

的小图像

现在，我如何修改下面的脚本，以便它可以根据复选框的名称确定要使用哪个类

CSS:

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[]");
})

函数自定义复选框（checkboxName）{
var checkBox=$（'input[name=“”+checkboxName+'“]'）；
$（复选框）。每个（函数（）{
$（this.wrap（“”）；
如果（$（this）.is（':checked'））{
$（this.parent（）.addClass（“选定”）；
}
});
$（复选框）。单击（函数（）{
$（this.parent（）.toggleClass（“选定”）；
});
}
$（文档）.ready（函数（）{
customCheckbox（“房间[]）；
})

HTML

编辑**

已删除函数和修改的脚本：

<script>
 $(document).ready(function (){
        $("input:checkbox").each(function(){
    if($(this).attr("name") == "room[]") {
       $(this).wrap( "<span class='custom-checkbox'></span>" );
       if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
    } else if($(this).attr("name") == "request[]") {
       $(this).wrap( "<span class='custom-checkbox2'></span>" );
       if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
    }
});

    })
</script>

$（文档）.ready（函数（）{
$（“输入：复选框”）。每个（函数（）{
如果（$（this.attr（“name”）=“room[]））{
$（this.wrap（“”）；
如果（$（this）.is（':checked'））{
$（this.parent（）.addClass（“选定”）；
}
}else if（$（this）.attr（“name”）==“request[]”）{
$（this.wrap（“”）；
如果（$（this）.is（':checked'））{
$（this.parent（）.addClass（“选定”）；
}
}
});
})

这是在选择器中处理的，假设您使用的是CSS3，就像这样

input[type*='checkbox'][name*='room'] {
    ... styles here
}

您可以使用“each”jQuery函数，它将检查页面上复选框类型的每个输入。因此，您只需获取它的名称，如果它是“room[]”，则将

自定义复选框大尺寸

类添加到span wrap，如果它的名称是“request[]”，则将

自定义复选框小尺寸

类添加到span wrap（我更改了CSS以使事情变得简单）

JS:

var wrapSpan = $('<span class="custom-checkbox-span"</span>');
$('input:checkbox').each(function() {
    if ($(this).is(':checked')) {
        wrapSpanspan.addClass('checked');
    }
    if($(this).attr("name") == "room[]") {
        wrapSpan.addClass("custom-checkbox-big-size");
    }
    if($(this).attr("name") == "request[]") {
        wrapSpan.addClass("custom-checkbox-small-size");
    }
    $(this).wrap(wrapSpan).hide();
});

$(".custom-checkbox-span").on("mouseup",function(){
    checkSpan($(this));
});

function checkSpan(el) {
    if(el.hasClass("selected")) {
        el.removeClass("selected");
        el.children().prop("checked",false);
    } else {
        el.addClass("selected");
        el.children().prop("checked",true);
    }
}

.custom-checkbox-big-size {
    background:red;
    width: 50px;
    height: 50px;
    display: inline-block;
}
.custom-checkbox-big-size:hover, .custom-checkbox-big-size.selected {
    background:yellow;
}
.custom-checkbox-small-size {
    background:blue;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.custom-checkbox-small-size:hover, .custom-checkbox-small-size.selected {
    background:green;
}

---

检查一下。我用颜色做的，因为我没有你的原始图像，你必须改变

背景：颜色规则。
你能添加你的html代码吗？如果你能使用Fiddle，你实际上可能不需要任何js，使用attrib css选择器：
[name='room']
而不是
。自定义复选框
@xzengga我添加了html部分。你能帮忙吗？@samantha:好的，但您也可以使用
：checked
psudo选择器在CSS中应用这些选项。我只是认为使用js来表示CSS可以处理的内容是错误的；我上面看到的一切都可以在纯CSScan中完成，你可以给它们不同的类名吗？添加了*for substring matching do，以使name属性是一个数组。我很欣赏这一点，但我更喜欢使用js，因为它工作得很好。只需要修改它，以便它可以根据复选框名称指定要使用的类。您可以提供帮助吗？然后，您应该能够使用类似于上面的选择器将函数中的第一行替换为在等号之前添加*字符。例如：var checkBox=$（'input[name*=“'+checkboxName+'”）；当我检查你的小提琴时，这正是我想要的，但我不确定如何使用它来整合我的功能。正如你提到的，我试着把它放在最后一个括号之后，但它没有做任何更改。您能帮忙吗？我已经在JSFIDLE中添加了更多的代码。如果您的函数只是从复选框中切换所选的类，那么这将按照您的预期完成工作。但是如果你需要那个跨度，请告诉我，我会再次更新。现在我放置了你以前的小提琴版本脚本。它显示大小复选框取决于我想要的复选框的名称。但该功能不起作用。该函数假设根据复选框的状态显示不同的背景图像。但您希望背景位于哪个元素中？在复选框内还是在复选框外？或者一个特定的元素，或者整个身体背景？该功能将根据css用正常、悬停和选定状态的图像替换复选框。
var wrapSpan = $('<span class="custom-checkbox-span"</span>');
$('input:checkbox').each(function() {
    if ($(this).is(':checked')) {
        wrapSpanspan.addClass('checked');
    }
    if($(this).attr("name") == "room[]") {
        wrapSpan.addClass("custom-checkbox-big-size");
    }
    if($(this).attr("name") == "request[]") {
        wrapSpan.addClass("custom-checkbox-small-size");
    }
    $(this).wrap(wrapSpan).hide();
});

$(".custom-checkbox-span").on("mouseup",function(){
    checkSpan($(this));
});

function checkSpan(el) {
    if(el.hasClass("selected")) {
        el.removeClass("selected");
        el.children().prop("checked",false);
    } else {
        el.addClass("selected");
        el.children().prop("checked",true);
    }
}

.custom-checkbox-big-size {
    background:red;
    width: 50px;
    height: 50px;
    display: inline-block;
}
.custom-checkbox-big-size:hover, .custom-checkbox-big-size.selected {
    background:yellow;
}
.custom-checkbox-small-size {
    background:blue;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.custom-checkbox-small-size:hover, .custom-checkbox-small-size.selected {
    background:green;
}