javascript - 为现有复选框生成标签以用于 jQuery UI

Question

我希望能够使用jQuery UI 按钮为页面上的所有复选框设置样式。但是，许多按钮没有标记。有没有办法我可以做这样的事情：

$(".unlabeled-checkbox").append("<label> </label>").button();

还要正确填写标签的“for”属性？

Answer 1

您可以将wrap()方法传递给要执行的函数，试试这个：

$('.unlabeled-checkbox').wrap(function() {
    return $('<label></label>').attr('for', $(this).prop('name'));
});

在函数内部，this将引用.unlabeled-checkbox数组中的当前元素。

Answer 2

你可以使用 jQuery 的“wrap”函数来包装你所有的复选框：

$(".unlabeled-checkbox").wrap("<label></label>");

这将产生 HTML：

<label>
    <input class="unlabeled-checkbox" type="checkbox" value="a" />
</label>
<label>
    <input class="unlabeled-checkbox" type="checkbox" value="b" />
</label>

如果你环绕<label>你<input>，你不需要“for”属性。单击标签将触发单击内部复选框。