添加文本CheckBox控件在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

试试这个

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 2

正确标记为你想要做的是这样的：

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

第一，如果你想创建的复选框做这样的

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

声明该检查的HTML应该这样定义

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

如果你想设置，你必须为复选框，这样创造一个元素的标签，背后的原因，你无法看到Hellow世界这是不正确的使用文本的设置标签复选框，我认为这是甚至不是该类型的有效属性。这里涉及到一个标签为复选框的HTML的一个例子

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

然后追加所有相关的这样

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

在最后的HTML，你可以创建这样的

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/