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＆＃39;文本。

$("#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

<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/

Answer 4

首先，如果要创建复选框，请执行此操作

$("#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/

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

4 个答案: