Question

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

$(".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”属性。单击标签将触发单击内部复选框。

为现有复选框生成标签以与jQuery UI一起使用

2 个答案: