1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:38 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

OnUnclick?

i have an image doing an onclick, but cant get it to do unclick

         

rhys9tt

10:33 am on Sep 30, 2008 (gmt 0)

10+ Year Member



I have the following code which automatically ticks some tick boxes when i click on 1 image.

I want to be able to un check the checkboxes when the image is clicked for a second time it is clicked.

hope someone can help

Rhys

<html>
<head>
<title>test</title>
<script type="text/javascript"> function check(checkboxid2) { document.getElementById(checkboxid2).checked = "checked"; } </script>
</head>
<body>

<div id="mainContent2">

<form method="post" action="test.asp" name="searchform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td align="center">
<img src="../images/map/chester.gif" width="140" height="100" onClick="javascript:check('alochester north');javascript:check('alochester south');javascript:check('alochester east');javascript:check('alochester west');javascript:check('alochester central');javascript:check('all');">
</td>
<td align="center">
<img src="../images/map/tarporley.gif" width="140" height="100" onClick="javascript:check('alotarporley north');javascript:check('alotarporley south');javascript:check('alotarporley east');javascript:check('alotarporley west');javascript:check('alotarporley central');javascript:check('all');">
</td>
<td align="center">
<img src="../images/map/whitchurch.gif" width="140" height="100" onClick="javascript:check('alowhitchurch north');javascript:check('alowhitchurch south');javascript:check('alowhitchurch east');javascript:check('alowhitchurch west');javascript:check('alowhitchurch central');javascript:check('all');">
</td>
<td align="center">
<img src="../images/map/nantwich.gif" width="140" height="100" onClick="javascript:check('alonantwich north');javascript:check('alonantwich south');javascript:check('alonantwich east');javascript:check('alonantwich west');javascript:check('alonantwich central');javascript:check('all');">
</td>
<td align="center">
<img src="../images/map/CREWE.gif" width="140" height="100"onClick="javascript:check('aloCrewe');">
</td>
</tr>
</table>
<tr><td><h3>Regions</h3>
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tr>

<td><input type="checkbox" name="alochester central" id="alochestercentral" value="chester central" class="groupb">
<input type="checkbox" id2="alochester north" name="alochester north" id="alochestercentral" value="chester north" class="groupb">
<input type="checkbox" name="alochester south" id="alochestercentral" value="chester south" class="groupb">
<input type="checkbox" name="alochester east" id="alochestercentral" value="chester east" class="groupb">
<input type="checkbox" name="alochester west" id="alochestercentral" value="chester west" class="groupb">
<input type="checkbox" id="all" name="Check_ctr" value="yes"
onClick="Check(document.searchform.id=alochestercentral)">Chester </td>

<td>
<input type="checkbox" name="alotarporley central" id="alotarporleycentral" value="tarporley central" class="groupb">
<input type="checkbox" name="alotarporley north" id="alotarporleycentral" value="tarporley north" class="groupb">
<input type="checkbox" name="alotarporley south" id="alotarporleycentral" value="tarporley south" class="groupb">
<input type="checkbox" name="alotarporley east" id="alotarporleycentral" value="tarporey east" class="groupb">
<input type="checkbox" name="alotarporley west" id="alotarporleycentral" value="tarporley west" class="groupb">
<input type="checkbox" id="tarporley" name="Check_ctr_2" value="yes"
onClick="Check_2(document.searchform.id=alotarporleycentral)">
Tarporley</td>

<td>
<input type="checkbox" name="aloWhitchurch central" id="aloWhitchurchcentral" value="Whitchurch central" class="groupb">
<input type="checkbox" name="aloWhitchurch north" id="aloWhitchurchcentral" value="Whitchurch north" class="groupb">
<input type="checkbox" name="aloWhitchurch south" id="aloWhitchurchcentral" value="Whitchurch south" class="groupb">
<input type="checkbox" name="aloWhitchurch east" id="aloWhitchurchcentral" value="Whitchurch east" class="groupb">
<input type="checkbox" name="aloWhitchurch west" id="aloWhitchurchcentral" value="Whitchurch west" class="groupb">
<input type="checkbox" id="whitchurch" name="Check_ctr_3" value="yes"
onClick="Check_3(document.searchform.id=aloWhitchurchcentral)">
Whitchurch</td>

<td>
<input type="checkbox" name="aloNantwich central" id="aloNantwichcentral" value="Nantwich central" class="groupb">
<input type="checkbox" name="aloNantwich north" id="aloNantwichcentral" value="Nantwich north" class="groupb">
<input type="checkbox" name="aloNantwich south" id="aloNantwichcentral" value="Nantwich south" class="groupb">
<input type="checkbox" name="aloNantwich east" id="aloNantwichcentral" value="Nantwich east" class="groupb">
<input type="checkbox" name="aloNantwich west" id="aloNantwichcentral" value="Nantwich west" class="groupb">
<input type="checkbox" id="nantwich" name="Check_ctr_4" value="yes"
onClick="Check_4(document.searchform.id=aloNantwichcentral)">
Nantwich</td>
<td><input type="checkbox" name="aloCrewe" id="aloCrewe" value="Crewe">
<span onClick="CheckClick(aloCrewe);">Crewe</span></td>
</tr>
</table>
</td></tr><tr>
<td align="center">

</form>
</div>
div></div></div>
</div>
</body>
</html>

Fotiman

2:48 pm on Sep 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld. Try changing your toggle function to something like this: 

function check(checkboxid2) { 
  var el = document.getElementById(checkboxid2); 
  el.checked = (el.checked ? false: true); 
}

For future reference, try to keep your code samples limited to as small of an example as possible.

rhys9tt

5:10 pm on Sep 30, 2008 (gmt 0)

10+ Year Member



thanks for that

rhys9tt

5:07 pm on Oct 1, 2008 (gmt 0)

10+ Year Member



the code works fine in IE but doesnt wok in firefox, any ideas?

Fotiman

5:59 pm on Oct 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Looks like you have multiple elements with the same id. That's not valid. id must be unique. If you correct that, it should work.

rhys9tt

8:01 pm on Oct 1, 2008 (gmt 0)

10+ Year Member



i need the repeat id's as i alo have another javascript code that has one checkbox that ticks the 5 ceckboxes shown with the same id (they are set as hidden in the css.

can you help if i pos all the code?

Fotiman

8:23 pm on Oct 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Make your ids unique. Then create a new method that takes as parameters a boolean (checked or not) and an array of ids.

So, your HTML would look more like this: 


<input type="checkbox" name="alochester central" id="alochestercentral" value="chester central" class="groupb"> 
<input type="checkbox" name="alochester north" id="alochesternorth" value="chester north" class="groupb"> 
<input type="checkbox" name="alochester south" id="alochestersouth" value="chester south" class="groupb"> 
<input type="checkbox" name="alochester east" id="alochestereast" value="chester east" class="groupb"> 
<input type="checkbox" name="alochester west" id="alochesterwest" value="chester west" class="groupb"> 
<input type="checkbox" id="all" name="Check_ctr" value="yes" 
onClick="checkAll(this.checked,['alochestercentral', 'alochesternorth', 'alochestersouth', 'alochestereast', 'alochesterwest']);">Chester

And you'd have a function like this: 


function checkAll(bChecked, ids) { 
  var i, el; 
  for (i = 0; i < ids.length; i++) { 
    el = document.getElementById(id); 
    el.checked = bChecked; 
  } 
}

rhys9tt

4:38 pm on Oct 2, 2008 (gmt 0)

10+ Year Member



doesnt seem to work. it says there is an error in the function and says 'id is undefined'

rhys9tt

4:59 pm on Oct 2, 2008 (gmt 0)

10+ Year Member



I Have modified my old page that workks in IE to have unique ids:

<td>

<input type="checkbox" name="aloNantwich central" id="aloNantwichcentral" value="Nantwich central" class="groupb">
<input type="checkbox" name="aloNantwich north" id="aloNantwichnorth" value="Nantwich north" class="groupb">
<input type="checkbox" name="aloNantwich south" id="aloNantwichsouth" value="Nantwich south" class="groupb">
<input type="checkbox" name="aloNantwich east" id="aloNantwicheast" value="Nantwich east" class="groupb">
<input type="checkbox" name="aloNantwich west" id="aloNantwichwest" value="Nantwich west" class="groupb">
<input type="checkbox" id="all4" name="Check_ctr" value="yes"
onClick="check('aloNantwich central');check('aloNantwich north');check('aloNantwich south');check('aloNantwich east');check('aloNantwich west')">
Nantwich</td>

the function is the same as my old one, but im using the same javasscript function as i am for my image map sections. It now works fine in IE, but still doesnt work in firefox although i have no repeated ids.

any ideas?

cheers

Fotiman

5:07 pm on Oct 2, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Sorry, typo in my function. Should be: 


function checkAll(bChecked, ids) {  
 var i, el;  
 for (i = 0; i < ids.length; i++) {  
  el = document.getElementById(ids[i]);  
  el.checked = bChecked;  
 }  
}

Fotiman

5:09 pm on Oct 2, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




onClick="check('aloNantwich central');

In that example, you're passing in the name value, not the id. IE is stupid and lets you interchange them, but that's wrong. Instead, pass in the ID values (aloNantwicheastcentral).
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:38 am May 14, 2026