SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Change style of checked radio?

    I'm not sure if this is a JS question or if there's a CSS hook I can take advantage of but what I would like to do is add visual weight (background color #efefef) to a label when it's radio has been selected.

    I have a form with many radios and I want the user to be able to easily find the selected radio in the list (the small green dot isn't cutting it)

    Is there a descendant in CSS I can hook onto or is there a JavaScript method that might do the trick?

    Thanks!

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would probably have to use javascript. I would normally define a class to highlight the label rather than use script to set specific styles so in my script I only have to say mylabel.className = "highlight" for example.

    Assuming you want to use unobtrusive javascript (at least I hope you do) then I would use a class in the checkbox to assign the behaviour. Lets assume you are doing a nice form layout like

    Code:
    <label for="chk1">Blah: <input id="chk1" type="checkbox" class="highlightlabel" /></label>
    Then on the window.load (assigned unobtrusively) I would get all checkboxes, loop through them and assign an onclick event to highlight it's label. I'll have a closer look at coding this if you're not sure what I'm getting at.

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so my hopes of there being a pseudo class like input:checked has been dashed

    If you've seen a script that does this unobtrusively that you could point me to that would be great. Or some additional "newbie" resources would be much appreciated. Seems like something that would be a useful addition to the CS3 Spec

    Thanks!

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In fact...

    But as always, IE doesn't support it. So, a combination of the above and javascript should do the trick.

  5. #5
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    O.k. I was curious to see if I could do it. This is far from perfect but as a first attempt and so on...First off a snippet of the html :-

    Code:
    <p class="highlight">
            <label for="showallposts" id="showallpostscaption">Show All Posts?:</label>
            <input id="showallposts" type="checkbox" name="showallposts" />
        </p>
    I use .net so I have removed some of the extras .net likes to add to id and name values. With .net we have label controls and if you give them an associatedcontrolid linking to the checkbox it will render as above. This means the label doesn't wrap the checkbox but it won't matter. The key here is I have wrapped this part of the form in a p tag. I normally use fieldsets, labels and so on to create nice accesible forms using css - see this site for a good explanation of that.

    Suffice to say we seperate each label/form element with a p and then write css to format it.

    My css is simple enough for this example.

    Code:
    fieldset    {
        padding:5px;
        padding-left:15px;
        width:80%;
    }
    fieldset label  {
        clear:both;
        display:block;
        float:left;
        width:250px;
    }
    fieldset label.highlight {
        background-color: #99CCFF;
    }
    Now I can write some script to find any paragraphs with a class of highlight, find the label and checkbox within and assing the onclick of the checkbox to switch the class of the label.

    Code:
    function initCheckboxes() {
        var paras = document.getElementsByTagName("p");
        for (var i = 0; paras[i]; i++) {
            var para = paras[i];
            if (para.className.indexOf("highlight") > -1) {
                //find it's label
                var label = para.getElementsByTagName("label")[0];
                var chk = para.getElementsByTagName("input")[0];
                if (chk) {
                    chk.label = label;
                    chk.onclick = toggleCheckBoxHighlight;
                }
            }
        }
    }
    
    function toggleCheckBoxHighlight() {
        if (this.checked) {
            this.label.className = "highlight";
        } else {
        this.label.className = "";
        }
    }
    
    addLoadEvent(initCheckboxes);
    function addLoadEvent(func) {
        var oldonload = window.onload;
    	if (typeof window.onload != 'function') {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			oldonload();
    			func();
    		}
    	}
    }
    This script will be in an external file. I've tested it and it works nicely.


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
  •