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

Hi,

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.

Thanks!






<script type="text/javascript">
$(function() {
  $('div.moredates').hide();
  $('a.moredates').click(function() {
    // find the next element after the one clicked and slideToggle it
    $(this).next().slideToggle();
    
    //$(this).hide();  // "more" stays visible
    
    
  });
});
</script>
<script type="text/javascript">
     $(function(){
   $(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>

<script type="text/javascript">
$(document).ready(function(){

		//Hide div w/id extra
	   $("div.moredates").css("display","none");

		// Add onclick handler to checkbox w/id showall
	   $("#showall").click(function(){
	    

		// If checked
		if ($("#showall").is(":checked"))
	
		{
			//show the hidden div
			$("div.moredates").show("fast");
		}
		else
		{
			//otherwise, hide it
			$("div.moredates").hide("fast");
		}
	  });

	});
	</script>

<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")
imgs[n].src=source;

}
</script>






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



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

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sar1973Commented:
Try this function (the argument "myIMG" must be the ID of the image):
function changeimage(myIMG) {
	myELM=document.getElementById(myIMG);
	myELMIMG=myELM.src;
	myELM.src=myELM.lowsrc;
	myELM.lowsrc=myELMIMG;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
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.

Thanks!
0
Sar1973Commented:
Yes, you should set their HTML to use that functions (see http://www.w3schools.com/tags/att_img_src.asp).
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.