I wanted to show and hide my TextBox based on value selected in RadiobuttonList. I wrote the following code for that

$("#<%= rbtnIsPFEnabled.ClientID %>").click(function () {
                pfno = $("#<%= txtPFNo.ClientID %>");
                if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val() == "Yes") {
                    pfno.css("dispay") = "block";
                }
                else
                    pfno.css("dispay") = "none";
            });

Though I had achieved my task by using JQuery.show() and JQuery.hide() but was not satisfied as I wanted to know why first approach failed. Second is I used $("#<%= rbtnIsPFEnabled.ClientID %>") in above code, can I reduce it to one by using something else second time like this or anything else?

I tried $(this+" input:checked").val() and $(this.toString()+" input:checked").val() but it did not work, so I had to repeat it.

I wanted to show and hide my TextBox based on value selected in RadiobuttonList. I wrote the following code for that

$("#<%= rbtnIsPFEnabled.ClientID %>").click(function () {
                pfno = $("#<%= txtPFNo.ClientID %>");
                if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val() == "Yes") {
                    pfno.css("dispay") = "block";
                }
                else
                    pfno.css("dispay") = "none";
            });

Though I had achieved my task by using JQuery.show() and JQuery.hide() but was not satisfied as I wanted to know why first approach failed. Second is I used $("#<%= rbtnIsPFEnabled.ClientID %>") in above code, can I reduce it to one by using something else second time like this or anything else?

I tried $(this+" input:checked").val() and $(this.toString()+" input:checked").val() but it did not work, so I had to repeat it.

• javascript
• jquery
• css
• asp

Share Follow edited Dec 18, 2014 at 5:30 Imad asked Dec 18, 2014 at 5:25 ImadImad 7,4901414 gold badges6262 silver badges124124 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

$("#id").css("display", "none");
$("#id").css("display", "block");

if Your pfno contains your ID

then this should work

$(pfno).css("display", "none");
$(pfno).css("display", "block");

You Should Use FireBug For Debugging

EDIT:

<script type="text/javascript">
    function fun(obj) {

        if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val()=='Yes') {
            $("#<%= txtPFNo.ClientID %>").css("display", "block");
        }
        else {
            $("#<%= txtPFNo.ClientID %>").css("display", "none");
        }
    }


</script>  

<asp:RadioButtonList   ID="rbtnIsPFEnabled"     runat="server" >
    <asp:ListItem Text="Yes" Value="Yes" onchange="fun(this);"> </asp:ListItem>
    <asp:ListItem Text="No" Value="No" onchange="fun(this);"> </asp:ListItem>
    </asp:RadioButtonList>

    <asp:TextBox runat="server" ID="txtPFNo"/>

You can resolve this issue in multiple way using jQuery. e.g.

$(pfno).css("display", "none"); //used when you are defining single css property or in chaining method
$(pfno).css({"display":"none"}); // used when you are defining multiple CSS property           
$(pfno).hide(); //show/hide function also perform display block/none functionality which is mostly used in script

ok first of all this is not correct :

     pfno.css("dispay") = "block";

above will never work

pfno.css({ 'display' : 'block' }); is how you set a css property ,

pfno.css( 'display' , 'block' ); is another way to set a css property , so that measn yuo are doing something else wrong.. you need to set an alert or write to the console to confirm that your if statement and your click handler are working