Question

我必须在同一页面上使用两种不同尺寸的复选框。我将根据复选框name确定要使用的尺寸。如果name='room'我将使用类＆＃39; custom-checkbox＆＃39;的大图片。如果name='request'，我将使用类custom-checkbox2的小图片。

现在，如何修改以下脚本，以便根据复选框的名称确定要使用的类？

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;
}

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

HTML

<div class="row">
<div class="large-3 right columns">
       <label><input type="checkbox" name="room[]" value="" /></label>
 </div>
</div>

<div class="row">
<div class="large-3 right columns">
       <label><input type="checkbox" name="request[]" value="" /></label>
 </div>
</div>

编辑**

删除了功能和修改过的脚本：

<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>

Answer 1

您可以使用＆＃34;每个＆＃34; jQuery函数，它将检查页面上复选框类型的每个输入。所以，你可以简单地得到它的名字，如果它是＆＃34; room []＆＃34 ;,将custom-checkbox-big-size类添加到span包，如果它的名字请求[]＆＃34;，将custom-checkbox-small-size类添加到span包中（我更改了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);
    }
}

<强> CSS：

.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;
}

检查jsFiddle。我用颜色做了，因为我没有原始图像，你必须改变background: color;规则。

Answer 2

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

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

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

2 个答案: