拆分複選框的數組，然後將它們包裝到標籤中

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/