在 JQuery 中将文本添加到复选框控件

Question

我想在 JQuery 中创建这个复选框

<input type="checkbox" id="someID">Hello World</input>

我认为这是等效的 JQuery 代码：

var $ctrl = $('<input/>').attr({ type: 'checkbox', id: 'someID', text: 'Hello World'})

但是，当我将 $ctrl 添加到此 div 标记时，它似乎不包含“Hello World”文本。

$("#renderedControl").append($ctrl);

任何想法我错过了什么？

Answer 1

您尝试做的正确标记是这样的：

<label><input type="checkbox" id="someID">Hello World</label>

输入元素不能包含内容（并且只有 需要一个结束标签或在 xhtml 中自动关闭）。

要使用 jQuery 创建上述内容，请尝试对此进行一些变体：

var $ctrl = $('<label />').html('Hello world')
                          .prepend($('<input/>').attr({ type: 'checkbox', id: 'someID'}));

演示：http://jsfiddle.net/bwxza/

Answer 2

试试这个

 var $ctrl =  $(document.createElement("input")).attr({
                     id:    'topicFilter-'
                    ,name:  'test'
                    ,value: 'test'
                    ,text :'my testing'
                    ,type:  'checkbox'
                    ,checked:true
            })

var lbl =  '<label>Hello world</label>';


 $("#renderedControl").append($ctrl.after(lbl));

希望有帮助

Answer 3

首先，如果您想创建复选框，请这样做

$("#renderedControl").append('<input type="checkbox" id="someID"/>');

注意检查的html应该这样定义

<input type="checkbox" name="example" id="someID" /> 

如果要设置标签，则必须像这样为该复选框创建一个元素，这是您看不到 Hellow 世界的原因，使用文本为复选框设置标签是不正确的，我认为不是甚至是该类型的有效属性。这是与该复选框的标签相关的 html 示例

<label for="example">Hellow world</label>

然后像这样追加所有相关的html

$("#renderedControl").append('<label for="checkbox">Hellow world</label>').append('<input type="checkbox" name="checkbox" id="someID" />')

最后你可以创建这样的东西

http://jsfiddle.net/ynMK8/

Answer 4

<input /> 元素不是标签对。它们是自动关闭的：

<input type="checkbox" id="someID" name="someName" value="input" />

使用 jQuery，您可以这样做：

$('<input />', {
    'type': 'checkbox',
    'id': 'someID',
    'name': 'someName'
}).after($('<label />', {
    'for': 'someName'
}).text('Hello World')).appendTo('body');​

演示：http://jsfiddle.net/KNnUt/