Javascript：復選框圖像和 Onclick

Question

如果您在此處單擊任何這些圖標：

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

他們打開/關閉各自的復選框。 當檢查多個以上，然后檢查另一個以上時，圖像和復選框的同步混亂。

這是更改圖像源的代碼：

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

如何動態地為每個引腳分配單獨的值，以便在選擇多個圖標時不會弄亂 img src 同步？

顯示圖標的代碼：

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

Answer 1

ID 屬性唯一地標識文檔中的元素。 沒有兩個元素在單個文檔中具有相同的 ID 值。

因此，只需為每個 html 圖像標簽提供唯一的 ID 即可嘗試。

希望這可以幫助..