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

JavaScript

Avatar of undefined
Last Comment
Sar1973

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Sar1973

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
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.

Thanks!
Sar1973

Yes, you should set their HTML to use that functions (see http://www.w3schools.com/tags/att_img_src.asp).
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy