Question

我们有几个报告要求用户从一系列选项中进行选择，我们将通过复选框向他们展示这些选项。我们想要防止这个过程（使用DRY原则）。我们希望能够做到这样的事情：

CSS：

.invisible {
    display:none;
}

HTML：

<section id="someOptions" class="invisible"></section>

jQuery的：

//some event
$('someOptions')buildSectionHTML('some caption', someArrayOfCheckBoxVals).removeClass('invisible');

... where＆＃34; buildSectionHTML＆＃34;将根据args生成适当大小和标记的html。 IOW，如果通过＆＃34; Elvin Bishop＆＃34;和＃34; [{＆＃39; Travelin Shoes＆＃39;，＆＃39; Pigboy Crabshaw＆＃39;，＆＃39; Sugar Dumplin＆＃39;，＆＃39; Rock My Soul，＆＃39; Struttin我的东西＆＃39;}]＆＃34;它会生成HTML，如：

Elvin Bishop
---------------------------------------------------------------------------------------
_| Travelin Shoes   _|Pigboy Crabshaw   _|Sugar Dumplin
_|Rock My Soul  _|Struttin My Stuff

（＆＃34; _ |＆＃34; s代表复选框，但它们应该全部对齐，像列一样，而不是像上面显示的文字那样的喋喋不休）。

是否有一个满足这种需求的jQuery插件，或者我最好只为它编写自己的jQuery函数，还是有更好的途径来巡航？

Answer 1

考虑到你要做的事情的具体性质，自己编写代码会简单得多。类似的东西：

for (var i = 0; i < array.length; i++) {
    $('element').append('<input type="checkbox" name="'+somevar+'"/>'.textvar);
});

如果你想用列做一些奇特的东西，你可以用一个列宽类和浮点属性轻松地用div包围它。（或者如果你正在寻找更复杂的东西，比如boostrap's grid system）。

Answer 2

嗯，对于js来说这很简单（这是一个插件方法）：

(function($){
  $.fn.extend({
    appendCheckboxes: function(name,labels){
      var container = this;
      $.each(label, function(i,l){
        var label = $.isObject(labels) ? i : l,
            value = $.isObject(labels) ? l : i;
        $('<label>').append(
          $('<input>',{'type':'checkbox','name':name}).val(value),
          label
        ).appendTo(container);
      });
    }
  });
})(jQuery);

示例：

//
// in both examples, the first argument is the name of the checkboxes.
// the second argument can vary, as shown below:
//

// populate using an array
// array values are labels, array indexes are values
$('#container1').appendCheckboxes('foo',['Apple','Banana','Cranberry','Dill']);

// Populate using an object
// keys are labels, values are values
$('#container2').appendCheckboxes('bar',{
    'Apple':1,'Banana':2,
    'Cranberry':3,'Dill':4
});

就对齐而言，您可以轻松地使用CSS（正如我在支持此答案的jsfiddle中所做的那样）。

是否有一个jQuery插件，将使用一系列复选框填充元素？

2 个答案: