How do I manipulate the same function in javascript for two different classes


Tags: javascript,jquery,css,checkbox

Problem :

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

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

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>

EDIT**

Removed function and modified script:

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


Solution :

You can use the "each" jQuery function, which will check every inputs of the checkbox type on the page. So, you simple get it's name, if it's "room[]", add the custom-checkbox-big-size class to the span wrap, if it's name is "request[]", add the custom-checkbox-small-size class to the span wrap (I changed your CSS to make the things simple).

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

Check the jsFiddle. I did it with colors, because I don't have your original images, you have to change the background: color; rules.


    CSS Howto..

    How to make H1 tag responsive in Avada WordPress theme using CSS

    CSS: How do you keep this Div to the right of a float?

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    How to override a *{list style:none} property

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to put a div in center of browser using CSS?

    How to set a menu hover delay

    How to output CSS files to single directory from several input directories?

    How to stop default CSS in asp.net [closed]

    How do I center all my elements?

    how to relocation dropdownmenu by CSS

    How to code a drop down menu in css?

    how can you have layers see through each other on a web page

    How to create an HTML CSS Page with Header, Footer and Content

    How to change font of select list items in the drop down

    CSS classes: base+additional. How to define?

    How do I place a DIV class in a specific position over another DIV class?

    CSS how to align elements

    How to default toggle to open using css/jquery?

    How to fix this CSS 3 code to make it working properly on the server?

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How to choose font different font-weight? use bolder one or just font-weight?

    How to hide a segment of my website using PHP

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    Unable to show progress bar

    How to select all elements that are not of a class within an id css

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How to tell Modernizr load (yepnope) to add CSS at bottom of head?