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/

拆分一系列复选框，然后将它们包装成标签

1 个答案: