javascript - 从复选框编辑提交的数据

我正在创建一个页面，管理员可以在其中使用复选框编辑来自先前表单的数据。我已经设法使用以下代码显示使用复选框提交的数据，因为我已将其提交到上一页的段落中：

<script type="application/javascript">
$(document).ready(function() {
var str = document.getElementById('size').innerHTML;
var res = str.replace(/<p>/g,'<input type="checkbox" value="');
var res = res.replace(/<\/p>/g,'" id="size" name="size[]" checked />');
document.getElementById('size').innerHTML=res;
});
</script>

但是我不确定如何显示剩余字段，我以某种方式需要实现一个for循环，但是我不确定执行此操作的最佳方法。

内容当前存储在数据库中，如下所示：

<p>xs</p><p>s</p><p>m</p><p>l</p><p>xl</p>

非常感谢！

哥斯达黎加

最佳答案

如果我对您的理解正确，则可以执行以下操作：

$("p").each(function(index) {
    $(this).replaceWith('<input type="checkbox" id="size" name="size[]" checked> ' +     $(this).text() + ' </input>');
});

这将遍历所有p元素，并用输入类型替换页面上显示的任何p元素。

编辑

如果您可以从以前的表单中设置value属性，则假定它可能从数据库返回，则类似的事情可能会起作用：

<p class="paragraph" >xs</p>
<p class="paragraph" value="24">s</p>
<p class="paragraph" >m</p>
<p class="paragraph" value="34">l</p>
<p class="paragraph" value="36">xl</p>

然后，您可以执行以下操作：

$("p").each(function (index) {
    if ($(this).attr("value") !== undefined) {
        $(this).replaceWith('<input type="checkbox" id="size" name="size[]" checked> ' + $(this).text() + ' </input>');
    } else {
        $(this).replaceWith('<input type="checkbox" id="size" name="size[]" unchecked>' + $(this).text() + ' </input>');
    }
});

这是另一个JSFiddle演示这一点。假设您已经从数据库中检索了数据。