jQuery to get the text attribute of a checkbox

Question

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

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 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()