Different-ways-to-create-a-Button-that-functions-like-an-HTML-radio-button

YUI Library JavaScript DHTML


            



    
Radio Buttons

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}








    #button-example-form fieldset, 
    #button-example-form fieldset div {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
    #button-example-form-postdata {
    
        border: dashed 1px #666;
        background-color: #ccc;
        padding: 1em;
    
    }
    #button-example-form-postdata h2 {
    
        margin: 0 0 .5em 0;
        padding: 0;
        border: none;
    
    }




Radio Buttons


  This example demonstrates different ways to create a Button that functions like an HTML radio button (<input type="radio"/>).




    (function () {
    var ButtonGroup = YAHOO.widget.ButtonGroup;
        // "checkedButtonChange" event handler for each ButtonGroup instance
        var onCheckedButtonChange = function (p_oEvent) {
            if(p_oEvent.prevValue) {
                YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4");
            
            }
            
            if(p_oEvent.newValue) {
                YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4");
            }
        
        };
        // "contentready" event handler for the "radiobuttonsfrommarkup"     
        YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", function () {
            var oButtonGroup1 = new ButtonGroup("buttongroup1");
            oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
            var oButtonGroup2 = new ButtonGroup("buttongroup2");
            oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
        
        
        });
        // Create a ButtonGroup without using existing markup
        var oButtonGroup3 = new ButtonGroup({ id:  "buttongroup3", name:  "radiofield3", container:  "radiobuttonsfromjavascript", usearia: true });
        oButtonGroup3.addButtons([
            { label: "Radio 9", value: "Radio 9", checked: true },
            { label: "Radio 10", value: "Radio 10" }, 
            { label: "Radio 11", value: "Radio 11" }, 
            { label: "Radio 12", value: "Radio 12" }
        ]);
        
        oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange);
    
    }());


    
        Radio Buttons
        
            From Markup

Radio 5

Radio 6

Radio 7

Radio 8