jQuery to get the text attribute of a checkbox

Question

Hi

I'm adding a check box to a page using the following statement;

<script language="C#" runat="server">
    protected void Page_Load ( object src, EventArgs e ) 
    {
        if (!IsPostBack)
        {
         CheckBox XChkBox = new CheckBox(); //instance of System.Web.UI.WebControls.CheckBox
         XChkBox.ID = "someId"
         XChkBox.Text = "someText"
         somePlaceHolder.Controls.Add(XChkBox);
        }
    }
</script>

I need to get the Text attribute of that check box on click. I tried $(this).attr('Text'); inside $('input[type=checkbox]').click(function(){}); but it returns undefined.

Where am I going wrong? Please suggest.

cheers

Answer 1

This depends on how you're implementing what you call "text".

If it's like this:

<input id="chkFoo" type="checkbox" text="Check me, fool!" />

Then you can access the text like this:

$("#chkFoo").attr("text")

If you do it like this

<input id="chkFoo" type="checkbox" />Check me, fool!

I think you're out of luck. Put a span around the text if you have to do it this way and grab it like this:

<input id="chkFoo" type="checkbox" /><span id="spnFoo">Check me, fool!</span>

$("#spnFoo").text()

Answer 2

The CheckBox control renders the Text inside a <label> element. The text is not part of the HTML checkbox. If you want to get the text from jQuery, you have to get it from the <label>.

Also, the <label> it generates doesn't actually have an ID. If your CheckBox is named checkBox1, then the HTML it outputs will be <label for="CheckBox1">, and the text is inside that element. I believe the correct jQuery syntax would be:

$('label[for="checkBox1"]').html()

Answer 3

ASP .NET renders the Text property of the ASP:CheckBox server control, as a label element just after the <input type="checkbox" /> on the generated markup at the client, it looks something like this:

<input id="someId" type="checkbox" name="someId" />
<label for="someId"> someText </label>

You can get the text of the label by:

$("input:checkbox").click(function() {
  var $label = $(this).next('label');
  alert($label.text());
});

Answer 4

And one more suggestion along with all the above is, please add the dynamic control in Page_Init() method instead of Page_Load() to persist the value of the dynamic control across postback.

And to get the checkbox value or text, for value, you can't directly get it as checkbox don't have value attribute. You can add a own attribute to your checkbox and can read it as shown below. http://praveenbattula.blogspot.com/2009/09/aspnet-checkboxlist-get-values-in.html And to get the text of it, you need to find the input label control and grab the text() of it. Hope it helps. Let me know, if you need any more help.