SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CheckBox changes styles help

    I am trying to make when a check box is checked it than applies a style to its a some text next to it.
    This is what I got. Can anyone help with it? Thanks!

    Code:
      THE JS
      <script language="javascript">
       function strikeOut(obj){
       	if (document.forms[0].checkbox.checked)
       	{	
       		document.getElementById('dname').style.backgroundColor='#ddd';
       		}
       }
       </script>
      
      THE HTML
     	<input type="checkbox" name="name" value="" onclick="strikeOut();"/> <strong id="dname">Name</strong>
    blakems.com
    "reaching more of your brain cells"


  2. #2
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the function is

    Code:
    //objectname is the name of the field that you want to change when checked
     function strikeOut(objectname){
     	if (objectname.value = true)
     	{
     		document.getElementById('dname').style.backgroundColor='#ddd';
     	}
    
     }
    to use it

    Code:
    //pass through the name of the field for strike out, e.g. if the field is named as such "name="email" then pass through strikeOut(email)
    <input type="checkbox" name="name" value="" onclick="strikeOut(name);"/> <strong id="dname">Name</strong>
    Edit:

    i got some spare time and tested it out that should work fine now

  3. #3
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, works.
    How do I make it if the checkbox is unchecked it goes back to normal?
    blakems.com
    "reaching more of your brain cells"


  4. #4
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats the harder part that im trying to figure out (im a newbie to javascript as well)

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function strikeOut(me, obj) {
     var bg=(me.checked) ? "#ddd" : "transparent";
     document.getElementById(obj).style.backgroundColor=bg;
    }
    HTML Code:
    <input type="checkbox" name="name" value="" onchange="strikeOut(this,'dname');" />
    <strong id="dname">Name</strong>

  6. #6
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u expand on the line

    var bg =(me.checked) ? "#ddd" : "transparent";

    am i right in thinking this is equivelent to

    if (me.checked = true)
    {
    document.getElementById(obj).style.backgroundColor="#ddd";
    }
    else
    {
    document.getElementById(obj).style.backgroundColor="transparent";
    }

    just not sure the of the syntax with the ? and the : (always trying to learn new things )

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kiltman
    can u expand on the line

    var bg =(me.checked) ? "#ddd" : "transparent";
    It's just like you thought - "(condition) ? (value if true) : (value if false)" is just shorthand for "if (condition) {value if true} else {value if false}".

    The whole function could be in single line:
    document.getElementById(obj).style.backgroundColor = (me.checked) ? "#ddd" : "transparent";

  8. #8
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect i got you now and who says you don't learn something new everyday , thanks man

  9. #9
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jorigami thanks for the help--perfect. However it doesn't work in IE, but it works in Mozilla
    blakems.com
    "reaching more of your brain cells"


  10. #10
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey it does work in both i.e. and firefox, in i.e. u have to click off the box first for anything to happen, if you change the method to onclick instead of onchange then it will work as soon as clicked for example

    change it to

    HTML Code:
     <input type="checkbox" name="name" value="" onclick="strikeOut(this,'dname');" /> Name




  11. #11
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your right it does. IE sp2 has that new security feature that will disable my js. Sorry for that
    blakems.com
    "reaching more of your brain cells"


  12. #12
    SitePoint Addict kiltman's Avatar
    Join Date
    Mar 2004
    Location
    scotland
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not a problem, that javascript thing is a pain sometimes lol, thats why i use firefox with the developers extention


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •