1

我们有几个报告需要用户从一系列选项中进行选择，我们将通过复选框呈现给他们。我们希望对这个过程进行防水（通过使用 DRY 原理）。我们希望能够做这样的事情：

CSS：

.invisible {
    display:none;
}

HTML：

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

jQuery：

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

...其中“buildSectionHTML”将根据参数生成适当大小和标记的 html。IOW，如果通过“Elvin Bishop”和“[{'Travelin Shoes', 'Pigboy Crabshaw', 'Sugar Dumplin', 'Rock My Soul, 'Struttin My Stuff'}]”，它将生成如下 HTML：

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

（“_|”代表复选框，但它们都应该对齐，列状，而不是像上面显示的文本那样仓促地排列）。

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

4

2 回答 2

1

好吧，对于 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中所做的那样）。

于 2013-07-19T19:48:36.140 回答
1

鉴于您要尝试做的事情的具体性质，自己编写代码会简单得多。就像是：

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

如果你想对列做一些花哨的事情，你可以很容易地div用列宽类和浮点属性将它包裹起来。（或者，如果您正在寻找更复杂的东西，比如boostrap 的网格系统）。

于 2013-07-19T19:37:46.823 回答