拆分复选框的数组，然后将它们包装到标签中

Question

我使用webform生成器，因为它是我通过CMS创建表单的唯一方法。我无法在呈现时手动编辑html代码，因此我必须使用jQuery进行操作。对于复选框标记输出是这样的：

<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_0" value="Masonry walls">Masonry walls 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_1" value="Attic">Attic 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_2" value="Non-masonry walls">Non-masonry walls 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_3" value="Roof">Roof 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_4" value="Foundation walls">Foundation walls 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_5" value="Floor">Floor 
<br> 
<input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_6" value="Ceiling">Ceiling 
<br> 

我希望他们看起来像这个：

<label class="c-input c-checkbox"> 
    <input id="radioStacked1" name="radio-stacked" type="checkbox"> 
    <span class="c-indicator"></span> 
    Toggle this custom checkbox 
</label> 

这是可能的吗？

Answer 1

如果默认的形式有可以针对一个容器，那会是理想的，这样你就可以一次性更换整个模块，而无需处理文本节点：

<div class="container"> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_0" value="Masonry walls">Masonry walls 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_1" value="Attic">Attic 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_2" value="Non-masonry walls">Non-masonry walls 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_3" value="Roof">Roof 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_4" value="Foundation walls">Foundation walls 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_5" value="Floor">Floor 
    <br> 
    <input type="checkbox" name="CAT_Custom_1946925" id="CAT_Custom_1946925_6" value="Ceiling">Ceiling 
    <br> 
</div> 

从那里，你可以迭代每个复选框，收集一些值，并将它们连接成一个字符串值。一旦这样做了，只是用新标记替换容器的内容：

var _html = ""; 
var $container = $('.container'); 
$container.find('input').each(function(){ 
    $this = $(this); 
    _name = $this.attr('name'); 
    _id = $this.attr('id'); 
    _value = $this.attr('value'); 

    _html += '<label class="c-input c-checkbox">'; 
    _html += ' <input id="' + _id + '" name="' + _name + '" type="checkbox" value="' + _value + '">'; 
    _html += ' <span class="c-indicator"></span>'; 
    _html += _value; 
    _html += '</label><br>'; 
}); 
$container.html(_html); 

看到它在这里的行动：https://jsfiddle.net/moz17sch/