Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Function toggle on check-uncheck

Posted on 2011-03-20
12
Medium Priority
?
597 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1200 total points
ID: 35176062
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 1200 total points
ID: 35176069
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
ID: 35176072
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
Major Serverless Shift

Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform

 
LVL 2

Author Comment

by:Panos
ID: 35176163
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
ID: 35176168
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 1200 total points
ID: 35176170
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
 
LVL 7

Assisted Solution

by:Maverick_Cool
Maverick_Cool earned 800 total points
ID: 35176191
     // 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
ID: 35176208
Thank you both for your codes!!
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 35176215
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
ID: 35176220
Thank you again.
regards
panos
0
 
LVL 2

Author Comment

by:Panos
ID: 35176225
Maverick_Cool
I missed your last comment.
Sorry
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 35176244
no problem.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

670 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