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

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

ASKER CERTIFIED SOLUTION
Avatar of Sar1973
Sar1973
Flag of Italy image

Link to home
membership
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

ASKER

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!
Yes, you should set their HTML to use that functions (see http://www.w3schools.com/tags/att_img_src.asp).