SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make form labels change color when items are checked or selected.

    I'm sitting here and the idea just came to mind.

    Is there a way to make a form label change color when, eg: a checkbox is checked, a menu/list item selected, or a radio button clicked?

    Let say the label was dark gray and then will change to green when it is selected.

    The bad news is I do not have the slightest clue as to how this is going to happen or if it is possible with Javascript.
    I searched Google but nothing - any ideas? Is this possible?


    Thanks everyone!


    IC

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    With css3 you can use the :checked pseudo-selector.

    Otherwise, jQuery is a popular library that can make the job easier.
    For example: http://www27.wolframalpha.com/input/...frican+swallow
    Whoops, that was left in the clipboard buffer.

    For example: http://docs.jquery.com/Selectors/checked
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another quickie

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <style type='text/css'>
    .lbl-unfocused {
      color: #000;
      font-weight: normal;
    }
    .lbl-focused {
      color: #090;
      font-weight: bold;
    }
    </style>
    <script type='text/javascript'>
    
    window.onload = function() {
      var f = document.getElementById('form-0');
      if (f) {
        f.onsubmit = formSubmit;
        xEachNum('chk-', 0, null,
          function (c) {
            c.onfocus = chkFocus;
            c.onblur = chkBlur;
          }
        );
      }
    };
    
    function chkFocus() {
      lblFocus(this, 'lbl-focused');
    }
    
    function chkBlur() {
      lblFocus(this, 'lbl-unfocused');
    }
    
    function lblFocus(chk, cls) {
      var l, a = chk.id.split('-');
      l = document.getElementById('lbl-' + a[1]);
      l.className = cls;
    }
    
    function formSubmit() {
      return false;
    }
    
    // http://cross-browser.com/x/lib/view.php?s=xEachNum
    function xEachNum(p,i,d,f)
    {
      var e = document.getElementById(p + i);
      while (e) {
        f(e, i, d);
        e = document.getElementById(p + (++i));
      }
    }
    </script>
    </head>
    <body>
    
    <form method="post" id="form-0" action="#">
      <p><input type="checkbox" id="chk-0" value="Red">   <label id='lbl-0' for='chk-0' class='lbl-unfocused'>Red  </label></p>
      <p><input type="checkbox" id="chk-1" value="Blue">  <label id='lbl-1' for='chk-1' class='lbl-unfocused'>Blue </label></p>
      <p><input type="checkbox" id="chk-2" value="Green"> <label id='lbl-2' for='chk-2' class='lbl-unfocused'>Green</label></p>
      <p><input type="checkbox" id="chk-3" value="Gray">  <label id='lbl-3' for='chk-3' class='lbl-unfocused'>Gray </label></p>
      <p><input type="checkbox" id="chk-4" value="None">  <label id='lbl-4' for='chk-4' class='lbl-unfocused'>None </label></p>
      <p><input type="submit"></p>
    </form>
    
    </body>
    </html>


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
  •