CODEWITHSUNDEEP
javascriptimagecheckboxonclick
alyx
alyx

Reputation: 2733

Javascript: Checkbox Images and Onclick

If you click any of these icons here:

http://sandrayoon.com/UAI/www3/newpin.php ,

they turn their respective checkboxes on/off. When more than one is checked, and then another is checked, the synching of the image and checkbox mess up.

Here's the code to change image source:

<script language="JavaScript" type="text/JavaScript"> 
var q=0; 
var root='img/pins/'; 
var data = [''];

function swapImg(ima){ 

if(q==0)
{
ima.setAttribute('src',root+'bro2.png');
q=1;

} 

else if(q==1)
{
ima.setAttribute('src',root+'bro1.png');
q=0;
}

}

</script>

How can I assign individual values to each pin dynamically so that the img src synching isn't messed up when more than one icon is selected?

Code to display icons:

<label for="bro_tag"><img src="http://sandrayoon.com/UAI/www3/img/pins/bro1.png" onclick="swapImg(this)"/></label>
<input type="checkbox" id="bro_tag" name="tags[bro]" value="1"/>

<label for="bro_tag2"><img src="http://sandrayoon.com/UAI/www3/img/pins/bro1.png" onclick="swapImg(this)"/></label>
<input type="checkbox" id="bro_tag2" name="tags[bro]" value="1"/>

<label for="bro_tag3"><img src="http://sandrayoon.com/UAI/www3/img/pins/bro1.png" onclick="swapImg(this)"/></label>
<input type="checkbox" id="bro_tag3" name="tags[bro]" value="1"/>

<label for="bro_tag4"><img src="http://sandrayoon.com/UAI/www3/img/pins/bro1.png" onclick="swapImg(this)"/></label>
<input type="checkbox" id="bro_tag4" name="tags[bro]" value="1"/>

Upvotes: 0

Views: 1790

Answers (1)

Harun
Harun

Reputation: 5179

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document.

So just give a try by giving unique ids for each html image tags.

Hope this helps..

Upvotes: 1

Related Questions