jquery - Flip Images on Radio Button Change -

i have radio list buttons have been replaced 2 image. when unchecked, imgfront visible, when checked, imgback visible. aim flip image using css transform reveal other imagine on check. how done?

html:

<div class="switch">     <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />     <label id="label1" for="cmn-toggle-1">          <img id="imgfront1" src="~/content/img/categories/refuse.png" width="65" height="65"/>          <img id="imgback1" src="~/content/img/categories/refuselabel.png" width="65" height="65" class="hidden"/>    </label> </div> <div class="switch">     <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />     <label id="label2" for="cmn-toggle-2">          <img id="imgfront2" src="~/content/img/categories/water.png" width="65" height="65"/>          <img id="imgback2" src="~/content/img/categories/waterlabel.png" width="65" height="65" class="hidden"/>    </label> </div> <div class="switch">     <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />     <label id="label3" for="cmn-toggle-3">          <img id="imgfront3" src="~/content/img/categories/building.png" width="65" height="65"/>          <img id="imgback3" src="~/content/img/categories/buildinglabel.png" width="65" height="65" class="hidden"/>    </label> </div> 

css:

/* ============================================================   common ============================================================ */ .cmn-toggle {   position: absolute;   margin-left: -9999px;   visibility: hidden; } .cmn-toggle + label {   display: block;   position: relative;   cursor: pointer;   outline: none;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; } /* ============================================================   switch 3 - yes no ============================================================ */ input.cmn-toggle-yes-no + label {   padding: 2px;   width: 120px;   height: 60px; } input.cmn-toggle-yes-no + label::before, input.cmn-toggle-yes-no + label::after {   display: block;   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   color: #fff;   font-family: "roboto slab", serif;   font-size: 20px;   text-align: center;   line-height: 60px; } input.cmn-toggle-yes-no + label::before {   -webkit-transition: -webkit-transform 0.5s;   -moz-transition: -moz-transform 0.5s;   -o-transition: -o-transform 0.5s;   transition: transform 0.5s;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;   backface-visibility: hidden; } input.cmn-toggle-yes-no + label::after {   -webkit-transition: -webkit-transform 0.5s;   -moz-transition: -moz-transform 0.5s;   -o-transition: -o-transform 0.5s;   transition: transform 0.5s;   -webkit-transform: rotatey(180deg);   -moz-transform: rotatey(180deg);   -ms-transform: rotatey(180deg);   -o-transform: rotatey(180deg);   transform: rotatey(180deg);   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;   backface-visibility: hidden; } input.cmn-toggle-yes-no:checked + label::before {   -webkit-transform: rotatey(180deg);   -moz-transform: rotatey(180deg);   -ms-transform: rotatey(180deg);   -o-transform: rotatey(180deg);   transform: rotatey(180deg); } input.cmn-toggle-yes-no:checked + label::after {   -webkit-transform: rotatey(0);   -moz-transform: rotatey(0);   -ms-transform: rotatey(0);   -o-transform: rotatey(0);   transform: rotatey(0); } 

js:

 $(document).ready(function() {         $('input[name=category]:radio').change(function() {             if(this.checked==true){                //do             }             else{                 //doo else             }         });     }); 

if want switch image on selected radio button can vastly simplify css.

in html, change id attributes on label > img tags class="imgfront" , class="imgback" so:

<div class="switch">     <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />     <label id="label1" for="cmn-toggle-1">          <img class="imgfront" src="~/content/img/categories/refuse.png" width="65" height="65"/>          <img class="imgback" src="~/content/img/categories/refuselabel.png" width="65" height="65"/>    </label> </div> <div class="switch">     <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />     <label id="label2" for="cmn-toggle-2">          <img class="imgfront" src="~/content/img/categories/water.png" width="65" height="65"/>          <img class="imgback" src="~/content/img/categories/waterlabel.png" width="65" height="65"/>    </label> </div> <div class="switch">     <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />     <label id="label3" for="cmn-toggle-3">          <img class="imgfront" src="~/content/img/categories/building.png" width="65" height="65"/>          <img class="imgback" src="~/content/img/categories/buildinglabel.png" width="65" height="65"/>    </label> </div> 

you can drop class="hidden" on "back" images. unless class defined , needed in different css, it's not being used here.

in css, leave common section , drop else. 3 simple css rules handle image flipping. css should like:

/* ============================================================   common ============================================================ */ .cmn-toggle {   position: absolute;   margin-left: -9999px;   visibility: hidden; } .cmn-toggle + label {   display: block;   position: relative;   cursor: pointer;   outline: none;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; }  /* ============================================================   radio button image flipping when selected ============================================================ */          .switch > label > .imgback {     display: none; }  .switch > input[type='radio']:checked + label > .imgfront {     display: none; }  .switch > input[type='radio']:checked + label > .imgback {     display: block; } 

your javascript fine, although it's not necessary here image flipping. if need take care of other activities when 1 of radio buttons selected keep it, otherwise can rid of it.

that should it. if want add more fancy transitions css can that. solution perform image swap using purely css.