locked
Adding em style based on radiobutton selection using jQuery RRS feed

  • Question

  • User-73514677 posted

    Hi,

    I am using ASP.NET , C# and jQuery.

    I have a radio button which is defined as below:

    <asp:RadioButton Id="rblYes" Text="Yes" runat="Server" GroupName="CstGroup1" />
    <asp:RadioButton Id="rblNo" Text="No" runat="Server" GroupName="CstGroup1" />

    I have another label and textbox. I want to add the below em style to label, if user selects option "Yes" in radiobutton. If option selected is "No", then the em is not required.

    <asp:label ID="lblOne" runat="Server" Text="Comments" />

    <em style="color:Red">*</em>

    How to achieve this in jQuery?

    Thanks

    Wednesday, May 18, 2016 2:58 PM

Answers

  • User61956409 posted

    Hi venkatzeus,

    I want to add the below em style to label, if user selects option "Yes" in radiobutton. If option selected is "No", then the em is not required.

    You could refer to the following sample code to set style for Label control.

    <div>
        <asp:RadioButton ID="rblYes" Text="Yes" runat="Server" GroupName="CstGroup1" />
        <asp:RadioButton ID="rblNo" Text="No" runat="Server" GroupName="CstGroup1" />
        <br />
        <asp:Label ID="lblOne" runat="Server" Text="Comments" />
        <em style="color: Red">*</em>
    </div>
    
    $(function () {
        $("input[type='radio']").change(function () {
            var isyes = $("#rblYes").is(":checked");
            if (isyes) {
                $("#lblOne").attr("style", $("em").attr("style"));
            } else {
                $("#lblOne").removeAttr("style");
            }
        })
    })
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 19, 2016 2:41 AM
  • User61956409 posted

    Hi venkatzeus,

    I am looking for adding the " * " based on radiobutton selection of "Yes". Is that possible?

    Firstly, you could use jQuery .show() method and .hide() method to dynamically show/hide an element.

    http://api.jquery.com/show/

    Secondly, you could use .append() method or .appendTo() method to dynamically create content and insert it into web page.

    http://api.jquery.com/append/

    http://api.jquery.com/appendTo/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 23, 2016 8:53 AM

All replies

  • User61956409 posted

    Hi venkatzeus,

    I want to add the below em style to label, if user selects option "Yes" in radiobutton. If option selected is "No", then the em is not required.

    You could refer to the following sample code to set style for Label control.

    <div>
        <asp:RadioButton ID="rblYes" Text="Yes" runat="Server" GroupName="CstGroup1" />
        <asp:RadioButton ID="rblNo" Text="No" runat="Server" GroupName="CstGroup1" />
        <br />
        <asp:Label ID="lblOne" runat="Server" Text="Comments" />
        <em style="color: Red">*</em>
    </div>
    
    $(function () {
        $("input[type='radio']").change(function () {
            var isyes = $("#rblYes").is(":checked");
            if (isyes) {
                $("#lblOne").attr("style", $("em").attr("style"));
            } else {
                $("#lblOne").removeAttr("style");
            }
        })
    })
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 19, 2016 2:41 AM
  • User-73514677 posted

    Hi,

    Thanks for the reply.

    I am looking for adding the " * " based on radiobutton selection of "Yes". Is that possible?

    Thanks

     

    Friday, May 20, 2016 9:15 AM
  • User61956409 posted

    Hi venkatzeus,

    I am looking for adding the " * " based on radiobutton selection of "Yes". Is that possible?

    Firstly, you could use jQuery .show() method and .hide() method to dynamically show/hide an element.

    http://api.jquery.com/show/

    Secondly, you could use .append() method or .appendTo() method to dynamically create content and insert it into web page.

    http://api.jquery.com/append/

    http://api.jquery.com/appendTo/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 23, 2016 8:53 AM