locked
examples of Checkboxes and Radio Buttons in WebPages RRS feed

  • Question

  • User1853794821 posted

    For what it's worth, I have put together a sample web page (razor/c#) illustrating some of the more common use cases involving checkboxes and radio buttons.

    Perhaps this can help those who, like me, may have struggled with how to work these html controls.

    There are three cases of checkboxes:

    (1)  Simple checkbox with no return value specified.  When unchecked, nothing is returned; when checked, "on" is returned.  The checked state of the checkbox is preserved.

    (2) Checkbox where a return value is specified.  When unchecked, nothing is returned; when checked, the string in the value attribute is returned.  The checked state of the checkbox is preserved.

    (3) A group of checkboxes, all sharing the same name attribute and each having a specified return value.  If any one or more of the checkboxes are checked, the value(s) will be returned in a (comma-separated) string containing the value attribute string(s) corresponding to the checked checkbox.  If none are checked, no value is returned.  This use case illustrates the use of the .Split method to convert the comma-separated values string into an array of strings, which can be evaluated in a for loop.    The checked state of each checkbox is preserved.

    There is one use case for radio buttons, showing buttons for yes and no (with the no button being checked by default.  The checked state of the radio button is preserved.

    Run the page and play with the checkboxes/radio buttons, clicking the "Submit" button to see the results. 

    Hopefully this can be useful to beginners like me.

    @{
        //illustrates usage of radio buttons and check boxes
        Page.title = "Checkboxes/Radio Butttons Use Cases";
        Layout = "~/_SiteLayout.cshtml";
        var cbox1 = Request["cbox1"];
        var cbox2 = Request["cbox2"];
        var cbox3 = Request["cbox3"].As<string>("");//defaults to empty string
        
        var rad1=Request["rad1"]; 
        
        
    
    }
    
    
    <form method="post" action="">
     
        <fieldset class="useCase">
            <h4>Checkbox with persistent return value of "on" or null:
            <input type="checkbox" name="cbox1" 
                @(Request["cbox1"] == "on" ? " checked" : "") /></h4>
            Value in Cbox1 (should be "on" when checked): @cbox1<br />
            <input type="submit" value="submit" />
        </fieldset>
     
    
        <fieldset class="useCase">
            <h4>Checkbox with persistent return value of "XYZ"
            XYZ: <input type="checkbox" name="cbox2" value="XYZ" 
                @(Request["cbox2"] == "XYZ" ? " checked" : "") /></h4>
            Value in Cbox2 (should be "XYZ" when checked): @cbox2
            <input type="submit" value="submit" />
        </fieldset>
    
        <fieldset class="useCase">
            <h4>Multiple Checkboxes, returning 0, one,or more persistent values
            Dogs:<input type="checkbox" name="cbox3"  value="Dogs"
                @(cbox3.Contains("Dogs") ? " checked" : "") />
            Cats:<input type="checkbox" name="cbox3"  value="Cats"
                @(cbox3.Contains("Cats") ? " checked" : "") />
            Birds:<input type="checkbox" name="cbox3"  value="Birds"
                @(cbox3.Contains("Birds") ? " checked" : "") />
            Snakes:<input type="checkbox" name="cbox3"  value="Snakes"
                @(cbox3.Contains("Snakes") ? " checked" : "") /></h4>
            <p>Value in Cbox3 (should be comma-separated string when any is checked): @cbox3<br />
            Here are the values from the checkedboxes:<br />
            @foreach (var cbox in cbox3.Split(','))
            {
                @cbox<br />
            }
            
            </p>
            <input type="submit" value="submit" />
        </fieldset>
    
        <br /><br />
        <fieldset class="useCase">
            <h4>radio Buttons to yield either "y" or"n" (default="n"):
            <input type="radio" name="rad1" value="y" @(rad1=="y"?" checked":"")/>Yes
            <input type="radio" name="rad1" value="n" @(rad1=="n"||rad1.IsEmpty()?" checked":"") />No
            </h4>
            <p>Here is the value: @rad1</p>
            <input type="submit" value="submit" />
        </fieldset>
    </form>
    

    Friday, July 20, 2012 6:00 PM

All replies

  • User-431615909 posted

    thank you so much for sharing!

    a huge weight off my shoulders ive been stressing how to do this for weeks.. cheers friend!

    Tuesday, January 15, 2013 12:30 AM
  • User1583589953 posted

    Many thanks!  I am new to WebPages (and I love the simplicity).  I know how to do this in WebForms and php.  But for the life of me I could not find any ANY examples on the internet for how to do this with WebPages and multiple checkboxes.  This has saved me a lot of frustration. 

    Thursday, April 18, 2013 4:02 PM