Link to home
Start Free TrialLog in
Avatar of smfmetro10
smfmetro10Flag for United States of America

asked on

how do you have a checkbox change an image on a click event


I have a form which collects some info from a database and displays it in a table.

Along with the info there is some hidden divs that display "more dates and locations".

That works great but now I have to have a checkbox that when checked will swap an image

Here is the code I have so far.


<script type="text/javascript">
$(function() {
  $('a.moredates').click(function() {
    // find the next element after the one clicked and slideToggle it
    //$(this).hide();  // "more" stays visible
<script type="text/javascript">
   $(document).on('click', ".moredates", function() {
        var current = $(this).find("img").attr("src");
        var backup = $(this).find("img").data("src");
        $(this).find("img").data("src", current);
        $(this).find("img").attr("src", backup);

<script type="text/javascript">

		//Hide div w/id extra

		// Add onclick handler to checkbox w/id showall

		// If checked
		if ($("#showall").is(":checked"))
			//show the hidden div
			//otherwise, hide it


<script type="text/javascript">
function checkit(cbox)
var source=(cbox.checked)? "<!--$HttpRelativeFragmentsRoot-->tdc_seminars/images/cme-less.png":"<!--$HttpRelativeFragmentsRoot-->tdc_seminars/images/cme-more.png";

var imgs=cbox.parentNode.getElementsByTagName("IMG");
for (var n=0;n<imgs.length;n++)
if (imgs[n].className=="image-swap")


<form name="checkform" id="checkform"  method="post" action="">
<table cellpadding="0" cellspacing="0" border="0">
<td width="200" align="left"><input type="checkbox" name="showall" id="showall" onchange="checkit(this)"/>All dates and locations</td>

<a class="moredates"><a class="moredates"><img class="image-swap" src="<!--$HttpRelativeFragmentsRoot-->tdc_seminars/images/cme-more.png" width="45" height="9" data-src="<!--$HttpRelativeFragmentsRoot-->tdc_seminars/images/cme-less.png" width="45" height="9"/></a>
		                <div class="moredates">

<!--some looping in here-->

Open in new window

Avatar of Sar1973
Flag of Italy image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of smfmetro10


Thanks for the reply!

Does there have to be a src attribute for the two images as well?

I'm a newbie when it comes to javascript stuff.

Yes, you should set their HTML to use that functions (see