if then checkbox.checked move image

hello

i have 40 checkboxes with corresponding images scaled down on a page. the user can only click up to 3 checkboxes. If they click a 4th an alert tells user to unclick one before clicking this one.

at the bottom of the page are 3 images full size for their image choices. when user clicks any checkbox i would like the corresponding image to show instead of one of the 3 images that are there.

i have looked online for an answer but most of them are in relation to 1 image or 1 checkbox. i have tried several scripts but none seem to move the image to elsewhere. they are all show/hide.

i could do something like hide all the images in each of the choice boxes & upon checking the box the right image would show but im not sure how to do it for 3 boxes & not have them repeat.

if user clicks on check5, check 9 & check25 the choice boxes below would show image 5, image 9 & image 25. if user changes choice from image 9 to image 11 will image 11 show in the right choice box?

all images & checkboxes are named accordingly.

check1 & hhcard1
check2 & hhcard2
check3 & hhcard3 & so on.

i have only posted the code for 4 checkboxs/images

HTML Code:

---

<div id="cards" align="center" style="width: 95%">
   
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" height="650">

      <tr>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          1 <input type="checkbox" name="whatcard" value="Card 1" id=check1 onclick="return toggle(this);" >
      </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><font face="Lucida Console" size="2"><i><b>CARD
          2 <input type="checkbox" name="whatcard" value="Card 2" id=check2  onclick="return toggle(this);">
          </b></i></font></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          3 <input type="checkbox" name="whatcard" value="Card 3" id=check3 onclick="return toggle(this);">
          </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          4 <input type="checkbox" name="whatcard" value="Card 4" id=check4 onclick= "return toggle(this);">
          </font></i></b></td>
      </tr>
      <tr>
        <td width="11%" height="21">
                <img border="0" src="images/cards/hhcard1.gif" width="172" height="222" id=hhcard1  ></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="images/cards/hhcard2.gif" id=pic2 width="172" height="222"  id=hhcard2></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="images/cards/hhcard3.gif" id=pic3 width="172" height="222" id=hhcard3></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="images/cards/hhcard4.gif" id=pic4 width="172" height="222"  id=hhcard4></td>
      </tr>

<hr>
<div id="choices" align="center" style="width: 98%">
   
   
            <table align="center" class="auto-style2" style="width: 100%; text-align: center;">
                        <tr>
                                <td id="choice1"><img border="0" src="images/cards/templateblank.gif" width="287" height="366" ></td>
                                <td id="choice2"><img border="0" src="images/cards/templateblank.gif" width="287" height="366" ></td>
                                <td id="choice3"><img border="0" src="images/cards/templateblank.gif" width="287" height="366" ></td>
                        </tr>
                </table>
   
   
    </div>

---

and the java is as follows:

Code:

---

<script type="text/javascript">
var checked=0;
function toggle(box) {
    if( (box.checked == true) && (checked < 3) ) {
        checked++;
        return true;
                    }                 
                    else if( (box.checked == true) && (checked == 3) ) {
        alert("OOPS!  You already picked 3 BINGO cards!\n \nYou must uncheck another card before you can check this one.\n");
        return false;
    } else {
        checked--;
        return true;
    }
}
</script>

---

is there a way to make the current function do what i need since its already set up on each checkbox?

thanks for any help in advance. i been trying everything for the past couple weeks & im beyond frustrated.

HippieChickie

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="cards" align="center" style="width: 95%">

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" height="650">

      <tr>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          1 <input type="checkbox" name="whatcard" value="Card 1" id=check1 onclick="return toggle(this);" >
      </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><font face="Lucida Console" size="2"><i><b>CARD
          2 <input type="checkbox" name="whatcard" value="Card 2" id=check2  onclick="return toggle(this);">
          </b></i></font></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          3 <input type="checkbox" name="whatcard" value="Card 3" id=check3 onclick="return toggle(this);">
          </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          4 <input type="checkbox" name="whatcard" value="Card 4" id=check4 onclick= "return toggle(this);">
          </font></i></b></td>
      </tr>
      <tr>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/1.gif" width="172" height="222" id=hhcard1  ></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/2.gif" id=pic2 width="172" height="222"  id=hhcard2></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/3.gif" id=pic3 width="172" height="222" id=hhcard3></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/4.gif" id=pic4 width="172" height="222"  id=hhcard4></td>
      </tr>
    </table>
    </div>

<hr>
<div id="choices" align="center" style="width: 98%">


            <table align="center" class="auto-style2" style="width: 100%; text-align: center;">
                        <tr>
                                <td id="choice1"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                                <td id="choice2"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                                <td id="choice3"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                        </tr>
                </table>


    </div>

<script type="text/javascript">
/*<![CDATA[*/

var Max=3;

function toggle(cb){
 var t=document.getElementById('cards'),imgs=document.getElementById('choices').getElementsByTagName('IMG'),ips=t.getElementsByTagName('INPUT'),m=0,a=[],z0=0,z1=0,z2=0;
 for (;z0<ips.length;z0++){
  if (ips[z0].type=='checkbox'&&ips[z0].checked){
  m++;
  if (m>Max){
    cb.checked=false;
  }
  }
 }
 for (;z1<ips.length;z1++){
  if (ips[z1].type=='checkbox'&&ips[z1].checked){
  a.push(ips[z1].value.replace(/\D/g,''));
  }
 }
 for (;z2<imgs.length;z2++){
  imgs[z2].src='http://www.vicsjavascripts.org/StdImages/'+(a[z2]?a[z2]:'0')+'.gif';
 }
}

/*]]>*/
</script>

</body>

</html>

---

thanks for such a quick reply.

the code works great & i see you added in putting the cards in numerical order as well. i didnt think of that!

i hate to ask but is there a way to either add the alert on when they try to check the box or remove that part of your code so the other code i have works.

i see what you tried to do & i appreciate the effort but the user may not know why they cant check another box. with the alert, it tells those who might not know what they have to do to click a diff card.

if i wanted to also hide the card they are clicking (since its being moved ) would you suggest i use css or include another function with a getelementbyid?

thanks
HippieChickie

Code:

---

var Max=3;

function toggle(cb){
 var t=document.getElementById('cards'),imgs=document.getElementById('choices').getElementsByTagName('IMG'),ips=t.getElementsByTagName('INPUT'),m=0,a=[],z0=0,z1=0,z2=0;
 for (;z0<ips.length;z0++){
  if (ips[z0].type=='checkbox'&&ips[z0].checked){
  m++;
  if (m>Max){
    alert('only check '+Max);
    cb.checked=false;
  }
  }
 }
 for (;z1<ips.length;z1++){
  if (ips[z1].type=='checkbox'&&ips[z1].checked){
  a.push(ips[z1].value.replace(/\D/g,''));
  }
 }
 for (;z2<imgs.length;z2++){
  imgs[z2].src='http://www.vicsjavascripts.org/StdImages/'+(a[z2]?a[z2]:'0')+'.gif';
 }
}

---

thanks again for your quick reply & solution.

i had to make a change to the code slightly to get it to work. all of your cards were named 1, 2, 3 etc as mine had a prefix of hhcard

Code:

---

for (;z2<imgs.length;z2++){
  imgs[z2].src='images/cards/'[B]+'hhcard'[/B]+(a[z2]?a[z2]:'0')+'.gif';

---

i also changed my templateblank.gif to match your 0.gif & added in the css to hide each image if the checkbox was checked.

however im still having 1 problem getting it to work once i click a box.

when page opens all looks correct with the 0.gif cards on the bottom. once i check any box, the card does move down to the bottom but the other 2 disappear & show a red x.

i can click back & forth between the checkboxes & everything else works correctly. but the 0.gif will no longer show up once the 1st checkbox has been checked.

im afraid its because i added the hhcard part in, but it was easier to do that than to rename 40 cards.


to see it in action here is the link to the page: http://www.justtheway.com/wb/events/...pickcards.html

thanks,
HippieChickie

Code:

---

var Max=3;

function toggle(cb){
 var t=document.getElementById('cards'),imgs=document.getElementById('choices').getElementsByTagName('IMG'),ips=t.getElementsByTagName('INPUT'),m=0,a=[],z0=0,z1=0,z2=0;
 for (;z0<ips.length;z0++){
  if (ips[z0].type=='checkbox'&&ips[z0].checked){
    m++;
  if (m>Max){
    alert('only check '+Max);
    cb.checked=false;
  }
  }
 }
 for (;z1<ips.length;z1++){
  if (ips[z1].type=='checkbox'&&ips[z1].checked){
  a.push(ips[z1].value.replace(/\D/g,''));
  }
 }
 for (;z2<imgs.length;z2++){
  imgs[z2].src='http://www.justtheway.com/wb/events/bingo/holiday/images/cards/'+(a[z2]?'hhcard'+a[z2]:'0')+'.gif';
 }
}

---

ah ty. i needed to have the whole path in there.

if i could... i have another question.

i thought i would be able to just put in a reset button & have the checkboxes be unchecked & the choice1,choice2 & choice3 go back to to the original image of 0.gif.

i was mistaken. only the checkboxes reset when the reset button is clicked. i tried to add OnClick function to the reset button but its not working. i tried to swap out the images but its not working. i tried to change the button from reset to just a normal button & it still doesnt work.

suggestions?

thank you for you time.
HippieChickie

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<form>
<div id="cards" align="center" style="width: 95%">

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" height="650">

      <tr>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          1 <input type="checkbox" name="whatcard" value="Card 1" id=check1 onclick="return toggle(this);" >
      </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><font face="Lucida Console" size="2"><i><b>CARD
          2 <input type="checkbox" name="whatcard" value="Card 2" id=check2  onclick="return toggle(this);">
          </b></i></font></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          3 <input type="checkbox" name="whatcard" value="Card 3" id=check3 onclick="return toggle(this);">
          </font></i></b></td>
        <td width="11%" align="center" height="21"></td>
        <td width="11%" align="center" height="21"><b><i><font face="Lucida Console" size="2">CARD
          4 <input type="checkbox" name="whatcard" value="Card 4" id=check4 onclick= "return toggle(this);">
          </font></i></b></td>
      </tr>
      <tr>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/1.gif" width="172" height="222" id=hhcard1  ></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/2.gif" id=pic2 width="172" height="222"  id=hhcard2></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/3.gif" id=pic3 width="172" height="222" id=hhcard3></td>
        <td width="11%" height="21"></td>
        <td width="11%" height="21">
                <img border="0" src="http://www.vicsjavascripts.org/StdImages/4.gif" id=pic4 width="172" height="222"  id=hhcard4></td>
      </tr>
    </table>
    </div>
<input type="button" value="Reset Form" onclick="this.form.reset(); toggle();">
</form>
<hr>
<div id="choices" align="center" style="width: 98%">


            <table align="center" class="auto-style2" style="width: 100%; text-align: center;">
                        <tr>
                                <td id="choice1"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                                <td id="choice2"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                                <td id="choice3"><img border="0" src="http://www.vicsjavascripts.org/StdImages/0.gif" width="287" height="366" ></td>
                        </tr>
                </table>


    </div>
<script type="text/javascript">
/*<![CDATA[*/

var Max=3;

function toggle(cb){
 var t=document.getElementById('cards'),imgs=document.getElementById('choices').getElementsByTagName('IMG'),ips=t.getElementsByTagName('INPUT'),m=0,a=[],z0=0,z1=0,z2=0;
 for (;z0<ips.length;z0++){
  if (ips[z0].type=='checkbox'&&ips[z0].checked){
  m++;
  if (cb&&m>Max){
    cb.checked=false;
  }
  }
 }
 for (;z1<ips.length;z1++){
  if (ips[z1].type=='checkbox'&&ips[z1].checked){
  a.push(ips[z1].value.replace(/\D/g,''));
  }
 }
 for (;z2<imgs.length;z2++){
  imgs[z2].src='http://www.vicsjavascripts.org/StdImages/'+(a[z2]?a[z2]:'0')+'.gif';
 }
}

/*]]>*/
</script>

</body>

</html>

---

thanks so much for your help & patience. it works perfectly.

happy holidays to you & your family.

HippieChickie