Label a checkbox using jquery

Question

i'm not familiar with jquery.

What i'm trying to do is, drag and drop a text which will be displayed as a checkbox and the checkbox should have the id and tooltip same to the dropped-text. For that i used the following code.but it's not working.please help

 <script type="text/javascript">

  $(init);

  function init() {




  function addColumn(column) 
  {
    var iHtml;


    //Labeling and Tool Tip the Checkbox



   iHtml = "<span title='ToolTipText'>"+
   "<input id='<%" + column + ".ClientID%>' type='checkbox' name='<%" + column + ".ClientID %>' />"+
    "<label for='<%" + column + ".ClientID%>'>MyCheckBox</label></span>";

    return iHtml
  }

"...is label an i used thed put tooltip to a checkbox..." Before clicking Post Your Question, it's well worth reading your question over and dealing with at least the worst of the typos. I genuinely don't know what that sentence is meant to say. I could guess, but... — T.J. Crowder
– T.J. Crowder, Commented Apr 21, 2011 at 7:16
Yes, please clarify your question, im not sure what you mean :) — Martin at Mennt
– Martin at Mennt, Commented Apr 21, 2011 at 7:19
some network issues and typing mistakes resulted in that and please forgive me and read the updated question — NewBie
– NewBie, Commented Apr 21, 2011 at 7:19
The code is taken out of its context. We need the rest of it to see what you are doing wrong. — mekwall
– mekwall, Commented Apr 21, 2011 at 7:24

T.J. Crowder · Accepted Answer · 2011-04-21 07:29:02Z

2

There are lots of problems with that code. For one thing, although HTML5 allows just about any character in an id other than a space, earlier versions of HTML were more restrictive and CSS still is, so you really don't want to start an id with a #. (You can avoid using an id entirely in this case, unless you need the id for code you haven't quoted.) Your input type has a typo ("checbox") and so it won't be a checkbox, it'll default to "text".

Here's my best guess at what you want:

iHtml = "<label title='ToolTipText'>" +
        "<input id='x<%” + column + ".ClientID%>' type='checkbox' name='x<%” +column+".ClientID%>'/>" +
        " MyCheckBox</label>";

...but I'm not at all sure your ASP.Net aspects in there are right (I've left it as you had it), looks dodgy to me but I don't do a lot of ASP.Net. (Not least the fancy ” character.)

What I did above:

Make the id and name start with an x and got rid of the #. See the links above for why. (I left the id because I wasn't sure you didn't need it; if you don't need it, if the name is enough, you can remove it.)
Put the input inside the label. When you do that, you can avoid the whole for thing.
Put the title on the label, no need for an extra span.
Corrected the type.
Put the text of all attributes in single quotes. This is largely stylistic, at least in HTML (quoting attriutes is not stylistic in XHTML, it's required).

edited Apr 21, 2011 at 7:29

answered Apr 21, 2011 at 7:23

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NewBie Over a year ago

i need the id of the same in code behind. The checkbox should have a label as well as a tooltiptext i converted an asp control to html to get that details and thats why i used span and all. What i'm getting is an error saying ';' expected.

T.J. Crowder Over a year ago

@NewBie: I think that probably relates to the fancy quote mark just after the <%. Or...this is on an ASP.Net page, right? those <% and %> are going to get processed server-side, right?

Chapai · Accepted Answer · 2012-01-11 22:36:24Z

0

<input type="checkbox" id="blablabla" value="myvalue" class="myclass"/> 

<script type="text/javascript">
$(document).ready(function(){

$("#blabla").attr({title: "mytooltip"})
            .before(function(){
                      return "<label for=" + this.id +">MyLabelText</label>"
            });
});
</script>

or short form

$(
$("#blabla").attr({title:"mytooltip"})
            .before("<label for='blabla'>MyLabelText</label>");
);

edited Jan 11, 2012 at 22:36

user212218

answered Apr 21, 2011 at 7:47

Chapai

11 bronze badge

1 Comment

NewBie Over a year ago

Checkbox is generated with a script. These i dont understand

Collectives™ on Stack Overflow

Label a checkbox using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related