SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkbox forms & labels

    hi

    i'm using the following to highlight the label text. what i would like to do is highlight the text when the checkbox is true and unhighlight if the checkbox is false

    Code:
    <script type="text/javascript">
    var textcolor = 'white';
    var backgroundcolor = 'black';
    
    function highlight(ele) 
    {
    	ele.style.backgroundColor = backgroundcolor;
    	ele.style.color = textcolor;
    }
    </script>
    
    <form name="input" action="index.php" method="get">
    <input type="checkbox" name="tags" id="box1" ></input><label for="box1" onclick="highlight(this)">box1</label>
    <input type="checkbox" name="tags" id="box2" class="hide"></input><label for="box2" onclick ="highlight(this)">box2</label>
    <input type="checkbox" name="tags" id="box3" class="hide"></input><label for="box3" onclick ="highlight(this)">box3</label>
    
    <input type="submit" value="filter">
    </form>
    i have tried the following but its not working

    Code:
    <script type="text/javascript">
    var textcolor = 'white';
    var backgroundcolor = 'black';
    
    // determine whether checkbox is checked/unchecked
    function highlight(ele) {
        if (document.getElementById(ele).checked == false) {
    		ele.style.backgroundColor = backgroundcolor;
            ele.style.color = textcolor;
        }
    }
    </scipt>
    and also:

    Code:
    <script type="text/javascript">
    function toggleCB(cbElementName) {
    	var cbStatus = eval("document.getElementById('" + cbElementName + "').checked");
    	
    	// toggle checkbox status
    	if (cbStatus) {
    		eval("document.getElementById('" + cbElementName + "').checked = false;");
    
    		cbElementName.style.backgroundColor = white;
    		cbElementName.style.color = black;
    	} else {
    		eval("document.getElementById('" + cbElementName + "').checked = true;");
    		cbElementName.style.backgroundColor = black;
    		cbElementName.style.color = white;
    	}
    }
    </script>
    
    
    <form name="input" action="index.php" method="get">
    <input class="checkbox" type="checkbox" id="box1" value="checkbox"><label onClick="javascript:toggleCB('box1');">box1</label>
    <input class="checkbox" type="checkbox" id="box2" value="checkbox"><label onClick="javascript:toggleCB('box2');">box2</label>
    <input type="submit" value="filter">
    </form>
    what am i doing wrong??

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the label and the checkbox are 2 separate elements and must be treated as such.

    You could either pass the two objects to a function or determine which object was passed and get the other one. I think the first version is easier and so here's an example. Note that the checkbox has to be before the label in this version because I use previousSibling and nextSibling - there are other ways to get the appropriate elements if you change the format.
    Code:
    <html>
    <head>
    <style type="text/css">
    label {
    	background: white;
    	color: black;
    }
    label.highlight {
    	background: black;
    	color: white;
    }
    </style>
    <script type="text/javascript">
    function highlight(chkbox, lbl) {
    	if(!chkbox.checked) {
    		lbl.className = "";
    	} else {
    		lbl.className = "highlight";
    	}
    }
    </script>
    
    </head>
    <body>
    <form name="input" action="index.php" method="get">
    <input type="checkbox" name="tags" id="box1" onclick="highlight(this,this.nextSibling);"/><label for="box1" onclick="highlight(this.previousSibling,this);">box1</label>
    <input type="checkbox" name="tags" id="box2" onclick="highlight(this,this.nextSibling);"/><label for="box2" onclick="highlight(this.previousSibling,this);">box2</label>
    <input type="checkbox" name="tags" id="box3" onclick="highlight(this,this.nextSibling);"/><label for="box3" onclick="highlight(this.previousSibling,this);">box3</label>
    <input type="submit" value="filter">
    </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
  •