troubleshooting Question

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

Avatar of smfmetro10
smfmetro10Flag for United States of America asked on
JavaScript
3 Comments1 Solution257 ViewsLast Modified:
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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros