Solved

Function toggle on check-uncheck

Posted on 2011-03-20
12
590 Views
Last Modified: 2012-05-11
Hello experts.
I need help to handle a toggle function when i check - uncheck a check box.
Below is my test code:
My checkbox:
<input name="SameAsBillingInfo" type="checkbox" id="SameAsBillingInfo" value="SameAsBillingInfo" >

the div for toggle:
 <div id="shippinginformation">
..........
...........
</div>


Any help?
0
Comment
Question by:Panos
  • 5
  • 4
  • 3
12 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
Comment Utility
check this :
<script language="javascript">
   function toggle(o, id) {
       document.getElementById(id).style.display = (o.checked)?"none":"block";
   }
</script>

<input name="SameAsBillingInfo" type="checkbox" id="SameAsBillingInfo" value="SameAsBillingInfo" onclick="toggle(this,'SameAsBillingInfo')" >

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
Comment Utility
with jquery :


$("#SameAsBillingInfo").live("click", function() {
   if( $(this).is(":checked") ) {
      $("#shippinginformation").hide();
   }
   else {
      $("#shippinginformation").show();
   }
})

<input name="SameAsBillingInfo" type="checkbox" id="SameAsBillingInfo" value="SameAsBillingInfo" >

Open in new window

0
 
LVL 7

Expert Comment

by:Maverick_Cool
Comment Utility
try this:
<input name="SameAsBillingInfo" type="checkbox" id="SameAsBillingInfo" value="SameAsBillingInfo"  onClick="ToggleCheckhandler(this)">

...
function togglecheckhandler(obj)
{
if (obj.checked)
....
else
....
}

Open in new window

0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi leakim971.
Your codes are working (i have to change only the this element in onclick function).


Maverick cool can you write the full code.


Please add a fade in- out function too.
0
 
LVL 7

Expert Comment

by:Maverick_Cool
Comment Utility
k, you want the fade in and out for div rite, give me couple of min i will post it
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
Comment Utility
replace .hide() by fadeOut("slow");
and .show() by fadeIn("slow");

you may replace "slow" by 1000 or "fast" or 100 or 2000 and so on
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 7

Assisted Solution

by:Maverick_Cool
Maverick_Cool earned 200 total points
Comment Utility
     // Will fadein if already fadeout
      // will fadeout if aready fadein
var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}



function togglecheckhandler()
{
	// Will fadein if already fadeout
	// will fadeout if aready fadein
	fade("shippinginformation")
}

Open in new window

0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Thank you both for your codes!!
0
 
LVL 7

Expert Comment

by:Maverick_Cool
Comment Utility
you can also use jquery to make code simpler.
function togglecheckhandler(obj)
{
	if(obj.checked)
	{	$("#shippinginformation").fadeIn("slow");}
	else
	{	$("#shippinginformation").fadeOut("slow");}
}

Open in new window

0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you again.
regards
panos
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Maverick_Cool
I missed your last comment.
Sorry
0
 
LVL 7

Expert Comment

by:Maverick_Cool
Comment Utility
no problem.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Select2 jquery help 9 41
Getting AngularJS to work on jsfiddle 7 35
jQuery value within div undefined 3 17
Jquery autocomplete 10 19
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now