How to switch images when clicking on a checkbox?

Question

How to switch images when clicking on a checkbox?

Navigation

#1 by (6 votes)
#2 by (5 votes)

4

In my script I'm making a placeholder, but I can not get it to switch images after click in checkbox , and all the time table chairs are misaligned.

Type:

checked checkbox shows the red chair
checkbox unchecked shows the red chair

How can I make this work?

Mycode: link

<div style="width: 700px; height: 850px;  position: absolute; left: -20px;" >



 <div class="imagens" style="position:  static; left: 90px; top: 70px; width: 130px; height: 129px; "  >
<div style="position:  absolute; left: 55px; ">
<div style="position: relative; left: 29px;  top: 38px;"><img src="http://i.imgur.com/Ww2xT7t.png"/></div><divstyle="position: relative; left: 7px;   top: -65px;">
 <input type="checkbox" name="imagem" id="i1" />
 <label for="i1"><img src="http://i.imgur.com/OpIgi4H.png"/></label></div><divstyle="position: relative; left: 50px;  top: -155px;">
 <input type="checkbox" name="imagem" id="i2" />
 <label for="i2"><img src="http://i.imgur.com/8Iyy2C4.png"/></label></div><divstyle="position: relative; left: 95px; top: -188px;">
<input type="checkbox" name="imagem" id="i3" />
<label for="i3"><img src="http://i.imgur.com/M6hK389.png"/></label></div><divstyle="position: relative; left: 95px; top: -185px;">
<input type="checkbox" name="imagem" id="i4" />
<label for="i4"><img src="http://i.imgur.com/M5UHtdt.png"/></label></div><divstyle="position: relative; left: 49px;  top: -215px;">
<input type="checkbox" name="imagem" id="i5" />
<label for="i5"><img src="http://i.imgur.com/XWX98Fc.png"/></div></label><divstyle="position: relative; left:  5px;   top: -290px;">
<input type="checkbox" name="imagem" id="i6" />
<label for="i6"><img src="http://i.imgur.com/cdasBJA.png" /></div></label>
</div>



</div>
</div>

html css

asked by anonymous 01.01.2016 / 20:11

2 answers

5

You can do this with this simple javascript function, with JQuery:

If you had the same image for all labels and only rotated the images, you would have to do this only once. As follows

$('input[type="checkbox"]').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "imagem-vermelha");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "imagem-verde");
  }
})

Unfortunately, in your current case, you should repeat this for all checkboxes, since every label has different images.

I used the method .closest() which basically looks for the attencessor element, and the .children() ", which looks for the child elements using the argument, which in this case was a img .

It would look like this:

    $('#i1').click(function() {
      if ($(this).is(":checked")) {
        $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
      }else{
        $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/OpIgi4H.png");
      }
    })
$('#i2').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/8Iyy2C4.png");
  }
})
$('#i3').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M6hK389.png");
  }
})
$('#i4').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/M5UHtdt.png");
  }
})
$('#i5').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/XWX98Fc.png");
  }
})
$('#i6').click(function() {
  if ($(this).is(":checked")) {
    $(this).closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
  }else{
    $(this).closest('div').children('label').children('img').attr("src", "http://i.imgur.com/cdasBJA.png");
  }
})

    .imagens input[type="checkbox"] {
      visibility: hidden;
    }
    
    .imagens label {
      display: block;
      border: 1px solid #666;
      width: 50px;
    }
    
    .imagens input[type="checkbox"]:checked+label {
      border-color: #ccf;
    }
    
    .imagens img {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divstyle="width: 700px; height: 850px;  position: absolute; left: -20px;">

  <div class="imagens" style="position: static; left: 90px; width: 130px; height: 129px; ">

    <div style="position:  absolute; left: 55px; ">
      <div style="position: absolute; left: 29px;  top: 38px;"><img src="http://i.imgur.com/Ww2xT7t.png"/></div><divstyle="position: absolute; left: 7px;  top: 2px">
        <input type="checkbox" name="imagem" id="i1" />
        <label for="i1"><img src="http://i.imgur.com/OpIgi4H.png"/></label></div><divstyle="position: absolute; left: 50px;  top: -15px;">
        <input type="checkbox" name="imagem" id="i2" />
        <label for="i2"><img src="http://i.imgur.com/8Iyy2C4.png"/></label></div><divstyle="position: absolute; left: 94px; top: 5px">
        <input type="checkbox" name="imagem" id="i3" />
        <label for="i3"><img src="http://i.imgur.com/M6hK389.png"/></label></div><divstyle="position: absolute; left: 97px; top: 55px">
        <input type="checkbox" name="imagem" id="i4" />
        <label for="i4"><img src="http://i.imgur.com/M5UHtdt.png"/></label></div><divstyle="position: absolute; left: 49px;  top: 90px;">
        <input type="checkbox" name="imagem" id="i5" />
        <label for="i5"><img src="http://i.imgur.com/XWX98Fc.png"/></label></div><divstyle="position: absolute; left: 3px;  top: 55px">
        <input type="checkbox" name="imagem" id="i6" />
        <label for="i6"><img src="http://i.imgur.com/cdasBJA.png"/></label></div></div></div></div>

Injavascript,ineachcheckbox,youwouldhavetoputeachimageforwhenitwascheckedandwhenitwasunchecked.

InyourHTML,I'vemadesomechanges,fixingtheclosingofsometagsandorganizingthecedeiras,givingthemaposition:absoluteandpositioningthemmanually.

UPDATE

Forthechairtoturnredwithouttheneedofclick,Icreatedafunctionforeverycheckbox.Forexample,thatof#i1.

$('#i1').click(i1);functioni1(){if($('#i1').is(":checked")) {
     $('#i1').closest('div').children('label').children('img').attr("src", "http://franceimagecoaching.com.br/wp-content/themes/biznex/img/blog-type-article.png");
   } else {
     $('#i1').closest('div').children('label').children('img').attr("src", "http://i.imgur.com/OpIgi4H.png");
   }
 }

And at the end of the code, call all functions:

i1();
i2();
...
i6();

Example - JsFiddle

I used an example image as it did not have every red chair.

01.01.2016 / 21:02

Transform rows into columns with their respective values Get the last N characters of a string

score 6 · Accepted Answer

Image exchange technique using pure CSS:

Here is a simple example to demonstrate the background image exchange technique based on the checked attribute:

input { visibility: hidden; }
label { display: block; width:36px; height:32px; left:50%; top:50%;
        background:url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top; }
input:checked + label { background-image:url('http://i.stack.imgur.com/aHDoy.png'); }

Clique na cadeira!
<input type="checkbox" id="c1" name="c1" />
<label id="l1" for="c1"></label>

Applying technique in several numbered tables:

Using CSS transforms, it's an extremely lean and simple code to keep.

.mesa input { visibility: hidden; }

.mesa {
  position:relative; float:left;
  width:140px; height:140px;
  background:url('http://i.stack.imgur.com/MI8cD.png') no-repeat center center;
}

.mesa label {
  position:absolute; display: block;
  width:36px; height:32px; left:50%; top:50%; margin-left:-18px; margin-top:-16px;
  background:url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top;
}

.mesa input:checked + label {
  background:url('http://i.stack.imgur.com/aHDoy.png') no-repeat center top;
}

.mesa span {
  position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%);
  font:bold 15px Arial, Helvetica, sans-serif;
}

.l1 { transform:translateY(-50px) }    
.l2 { transform:rotate( 60deg) translateY(-50px) }
.l3 { transform:rotate(120deg) translateY(-50px) }
.l4 { transform:rotate(180deg) translateY(-50px) }
.l5 { transform:rotate(240deg) translateY(-50px) }
.l6 { transform:rotate(300deg) translateY(-50px) }

Clique nas cadeiras.<br>
<div class="mesa">
  <span>1</span>
  <input type="checkbox" id="m11" name="m1" value="1"><label class="l1" for="m11"></label>
  <input type="checkbox" id="m12" name="m1" value="2"><label class="l2" for="m12"></label>
  <input type="checkbox" id="m13" name="m1" value="3"><label class="l3" for="m13"></label>
  <input type="checkbox" id="m14" name="m1" value="4"><label class="l4" for="m14"></label>
  <input type="checkbox" id="m15" name="m1" value="5"><label class="l5" for="m15"></label>
  <input type="checkbox" id="m16" name="m1" value="6"><label class="l6" for="m16"></label>
</div>
<div class="mesa">
  <span>2</span>
  <input type="checkbox" id="m21" name="m2" value="1"><label class="l1" for="m21"></label>
  <input type="checkbox" id="m22" name="m2" value="2"><label class="l2" for="m22"></label>
  <input type="checkbox" id="m23" name="m2" value="3"><label class="l3" for="m23"></label>
  <input type="checkbox" id="m24" name="m2" value="4"><label class="l4" for="m24"></label>
  <input type="checkbox" id="m25" name="m2" value="5"><label class="l5" for="m25"></label>
  <input type="checkbox" id="m26" name="m2" value="6"><label class="l6" for="m26"></label>
</div>
<div class="mesa">
  <span>3</span>
  <input type="checkbox" id="m31" name="m3" value="1"><label class="l1" for="m31"></label>
  <input type="checkbox" id="m32" name="m3" value="2"><label class="l2" for="m32"></label>
  <input type="checkbox" id="m33" name="m3" value="3"><label class="l3" for="m33"></label>
  <input type="checkbox" id="m34" name="m3" value="4"><label class="l4" for="m34"></label>
  <input type="checkbox" id="m35" name="m3" value="5"><label class="l5" for="m35"></label>
  <input type="checkbox" id="m36" name="m3" value="6"><label class="l6" for="m36"></label>
</div>

With this, it is easy to reuse the same CSS for as many tables as you want. When generating server-side tables, only HTML is duplicated.

For browsers a little older this technique also works. Just change% s of% s by absolute position, and separate images for chairs better yet, a sprite with all the images and the table).

The important thing is to use the image as a background, so you can change without JS.

Update: tables of 4 and 6 chairs:

Here's an example of the code's versatility. With three more lines in CSS, and setting two more, we create the transform , .lq1 , .lq2 , .lq3 and '.q' classes, and we can mix 4 and 6 place tables.

Instead of using two different tables, I would add the plate to the chair image, which would make the code completely reusable.

Expand the example below to see it working:

.mesa input { visibility: hidden; }

.mesa {
  position:relative; float:left;
  width:140px; height:140px;
  background:url('http://i.stack.imgur.com/MI8cD.png') no-repeat center center;
}

.q { background-image:url('http://i.stack.imgur.com/GIc21.png') }

.mesa label {
  position:absolute; display: block;
  width:36px; height:32px; left:50%; top:50%; margin-left:-18px; margin-top:-16px;
  background:url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top;
}

.mesa input:checked + label {
  background:url('http://i.stack.imgur.com/aHDoy.png') no-repeat center top;
}

.mesa span {
  position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%);
  font:bold 15px Arial, Helvetica, sans-serif;
}



.l1, .lq1 { transform:translateY(-50px) }    
.l2 { transform:rotate( 60deg) translateY(-50px) }
.l3 { transform:rotate(120deg) translateY(-50px) }
.l4, .lq3 { transform:rotate(180deg) translateY(-50px) }
.l5 { transform:rotate(240deg) translateY(-50px) }
.l6 { transform:rotate(300deg) translateY(-50px) }
.lq2 { transform:rotate( 90deg) translateY(-50px) }
.lq4 { transform:rotate(270deg) translateY(-50px) }

Clique nas cadeiras.<br>
<div class="mesa">
  <span>1</span>
  <input type="checkbox" id="m11" name="m1" value="1"><label class="l1" for="m11"></label>
  <input type="checkbox" id="m12" name="m1" value="2"><label class="l2" for="m12"></label>
  <input type="checkbox" id="m13" name="m1" value="3"><label class="l3" for="m13"></label>
  <input type="checkbox" id="m14" name="m1" value="4"><label class="l4" for="m14"></label>
  <input type="checkbox" id="m15" name="m1" value="5"><label class="l5" for="m15"></label>
  <input type="checkbox" id="m16" name="m1" value="6"><label class="l6" for="m16"></label>
</div>
<div class="mesa q">
  <span>2</span>
  <input type="checkbox" id="m21" name="m2" value="1"><label class="lq1" for="m21"></label>
  <input type="checkbox" id="m22" name="m2" value="2"><label class="lq2" for="m22"></label>
  <input type="checkbox" id="m23" name="m2" value="3"><label class="lq3" for="m23"></label>
  <input type="checkbox" id="m24" name="m2" value="4"><label class="lq4" for="m24"></label>
</div>
<div class="mesa">
  <span>3</span>
  <input type="checkbox" id="m31" name="m3" value="1"><label class="l1" for="m31"></label>
  <input type="checkbox" id="m32" name="m3" value="2"><label class="l2" for="m32"></label>
  <input type="checkbox" id="m33" name="m3" value="3"><label class="l3" for="m33"></label>
  <input type="checkbox" id="m34" name="m3" value="4"><label class="l4" for="m34"></label>
  <input type="checkbox" id="m35" name="m3" value="5"><label class="l5" for="m35"></label>
  <input type="checkbox" id="m36" name="m3" value="6"><label class="l6" for="m36"></label>
</div>