如何通过jQuery创建一个带有文本的复选框控件

Question

如何通过jQuery创建一个带有文本的checkbox控件？

以下代码没有按预期工作（我认为这是因为input代码是自动关闭的）：

let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox',
    html: 'Autorefresh'
});
$('#some-id').append(autorefreshCheckbox);

那我该怎么办？

Answer 1

我认为这是你想要实现的目标：

$(function() {
  var autorefreshCheckbox = $('<input/>', {
      type: 'checkbox',
      id: 'check'
  });
  
  $('#some-id').append(autorefreshCheckbox);
  $('#some-id').append($('<label for="check">Autorefresh</label>'));
});

 <div id="some-id"></div>

无法在输入元素中插入HTML。

Answer 2

这样的东西？

var autorefreshLabel = $('<label>Autorefresh</label>')
var autorefreshCheckbox = $('<input/>', { type: 'checkbox' });
autorefreshLabel.append(autorefreshCheckbox);
$('body').append(autorefreshLabel);

http://plnkr.co/edit/qqE1jguC4SkLYC9z3nHn?p=preview

Answer 3

var autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
}).prependTo('<label>Autorefresh</label>').parent();
$('#some-id').append(autorefreshCheckbox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="some-id"></div>

Answer 4

<强> FIDDLE

$("#container").append("<input type=checkbox />" + YOUR_TEXT_VARIABLE);