jquery setting the name of checkbox label via javascript

Question

I want to create checkboxes dynamically. I am doing that, however I am failing with setting the name of the label. I tried setting the inner html to a value, though it didn't work. What is the correct way to do it ? source:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head> 
    <body> 

        <div data-role="page" >
            <fieldset data-role="controlgroup" id="exampleGroup">
            </fieldset>
        </div><!-- /page -->

    </body>
    <script>
        var someId = "Something";
        for (var i = 0; i < 5; i++) {
            var checkBox = $('<input>', {
                type: "checkbox",
                class: "custom",
                id: someId + i.toString()
            });
            var checkBoxLabel = $('<label>', {
                for : someId + i.toString(),
            });
            checkBoxLabel.innerHTML = "Hello world!"; // didn't work
            checkBox.appendTo("#exampleGroup");
            checkBoxLabel.appendTo("#exampleGroup");
        }
    </script>
</html>

.innerHTML is a property of DOM elements, not jQuery elements. If you use jQuery then use jQuery methods, don't mix & match with vanilla JS. See api.jquery.com/html or api.jquery.com/text. — JJJ
– JJJ, Commented May 4, 2014 at 9:56

Alessandro Minoccheri · Accepted Answer · 2014-05-04 09:57:43Z

1

Using text() you can set the text inside label

try this:

checkBoxLabel.text("Hello world!");

answered May 4, 2014 at 9:57

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

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

Comments

theHacker · Accepted Answer · 2014-05-04 10:00:14Z

0

Use text() or html() to set the contents of a DOM node. The difference between them is how they handle HTML tags.

checkBoxLabel.html('<foo>');
// <label><foo></label>

checkBoxLabel.text('<foo>');
// <label>&lt;foo&gt;</label>

You should prefer text() when you do not need HTML.

answered May 4, 2014 at 10:00

theHacker

4,0431 gold badge23 silver badges36 bronze badges

Comments

maj · Accepted Answer · 2014-05-04 10:01:12Z

0

Try this

JSFIDDLE

var someId = "Something";
for (var i = 0; i < 5; i++) {
    var checkBox = $('<input>', {
        type: "checkbox",
        class: "custom",
        id: someId + i.toString()
    });
    var checkBoxLabel = $('<label>', {
        for: someId + i.toString(),
    });
    checkBoxLabel.text(someId + i.toString());
    checkBox.appendTo("#exampleGroup");
    checkBoxLabel.appendTo("#exampleGroup");
}

Following is the area you want to look at

checkBoxLabel.text(someId + i.toString());

I used jquery text to change the label text

http://api.jquery.com/text/

answered May 4, 2014 at 10:01

maj

5825 silver badges8 bronze badges

1 Comment

maj Over a year ago

Done . Sorry for the mistake earlier

Collectives™ on Stack Overflow

jquery setting the name of checkbox label via javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related