www.webdeveloper.com
Results 1 to 4 of 4

Thread: Change font color based on checkbox

  1. #1
    Join Date
    Feb 2010
    Posts
    3

    Change font color based on checkbox

    I have a form with 3 checkboxes. When user checks one of the boxes, additional fields show beneath the checkbox and the other 2 checkboxes are grayed out (locked). What I want is that when a user checks a checkbox, not only does the other 2 lock, but the text associated with them turn a different font color. I want it to appear as if the other checkboxes and text are being grayed out. BTW - I don't know any java, someone helped me with this and gave me this code so please try to be as specifica as possible.

    For the lock function, I am using the following code:

    <script language=JavaScript> var U=0;L=1; // (U)nlocked & (L)ocked
    function doIt(_v)
    {
    if(eval("document.bgcheck.c"+_v+".checked"))
    {

    if(_v==2){lock(3);lock(4);}
    if(_v==3){lock(2);lock(4);}
    if(_v==4){lock(2);lock(3);}
    }
    else
    {

    if(_v==2){unlock(3);unlock(4);}
    if(_v==3){unlock(2);unlock(4);}
    if(_v==4){unlock(2);unlock(3);}
    }
    }
    function lock(_v)
    {
    eval("document.bgcheck.c"+_v+".disabled=true"); // IE thing
    eval("document.bgcheck.h"+_v+".value=L");
    eval("document.bgcheck.h"+_v+".name=''");
    }
    function unlock(_v)
    {
    eval("document.bgcheck.c"+_v+".disabled=false"); // IE thing
    eval("document.bgcheck.h"+_v+".value=U");
    eval("document.bgcheck.h"+_v+".name=document.bgche ck.h"+_v+".id");
    }
    function whipe(_v)
    {
    eval("document.bgcheck.c"+_v+".checked=false");
    }

    </script>

    Here's my checkboxes code. The document.getElementById('showMeOnClick1').style.di splay=(this.checked)?'inline':'none'; doIt(4)" code is when the user checks the box the additional fields appear.

    <tr><td>Package 1<input type="checkbox" name="package1" id="package1" value="Package1" onclick="document.getElementById('showMeOnClick1') .style.display=(this.checked)?'inline':'none'; doIt(4)" /><input type=hidden name=h4 value=0> </td></tr>

    <div id="showMeOnClick1" style="display:none">
    <span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
    <table>
    <tr><td><p><strong>Enter your shirt sizes:</strong><br /></p></td></tr>
    <tr><td>
    <input name="size1" id="size1" type="text" value="" size="30">
    <input name="size2" id="size2" type="text" value="" size="30">
    <input name="size3" id="size3" type="text" value="" size="30">
    </td></tr></table>
    </div>

    <tr><td>Package 2<input type="checkbox" name="package2" id="package2" value="Package2" onclick="document.getElementById('showMeOnClick2') .style.display=(this.checked)?'inline':'none'; doIt(3)" /><input type=hidden name=h4 value=0> <div id="showMeOnClick2" style="display:none"> </td></tr>

    <div id="showMeOnClick2" style="display:none">
    <span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
    <table>
    <tr><td><p><strong>Enter your desired colors:</strong><br /></p></td></tr>
    <tr><td>
    <input name="color1" id="color1" type="text" value="" size="30">
    <input name="color2" id="color2" type="text" value="" size="30">
    <input name="color3" id="color3" type="text" value="" size="30">
    </td></tr></table>
    </div>

    <tr><td>Package 3<input type="checkbox" name="package3" id="package3" value="Package3" onclick="document.getElementById('showMeOnClick3') .style.display=(this.checked)?'inline':'none'; doIt(2)" /><input type=hidden name=h4 value=0> </td></tr>

    <div id="showMeOnClick3" style="display:none">
    <span class="red_font">Please complete the information below as additional information is required for Package 1.</span>
    <table>
    <tr><td><p><strong>Enter your desired state:</strong><br /></p></td></tr>
    <tr><td>
    <input name="state1" id="state1" type="text" value="" size="30">
    <input name="state2" id="state2" type="text" value="" size="30">
    <input name="state3" id="state3" type="text" value="" size="30">
    </td></tr></table>
    </div>

  2. #2
    Join Date
    Feb 2010
    Posts
    3
    Have I put this in the wrong spot or am I missing something? I see I have had 49 views but not one comment. Please advise. Thanks!

  3. #3
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    maybe noone is replying because the code is pretty bad..

    eval = evil(!) and your using eval all the time in this script (or the guy who wrote it)

    i tried your function here http://www.webdevout.net/test?0L

    but it doesnt work as it is, maybe you can paste the whole page here (inside [ code ] [ / code ])

    grts

  4. #4
    Join Date
    Feb 2010
    Posts
    3
    Look, I didn't write this so don't knock me. I need the issue fixed so if you have a better way of coding it then why not share that?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles