javascript - 如何将复选框表单域从一个表单复制到另一个表单？

Question

我有一个用 PHP 构建的 HTML 表单，它基本上显示了一个记录列表，这个记录列表有一个表单，因为它在每条记录旁边都有一个复选框，它允许我对一组记录进行批量操作。

我的问题是我最近在每条记录下添加了一个评论部分，该评论部分允许快速发表评论，因此每个记录评论部分都有自己的表单，这当然打破了我的复选框形式作为评论形式关闭 </form>

记录列表的底部是一个下拉表单字段，其中列出了我可以对选中的复选框记录执行的操作。这是不再有效的部分，因为它不能再访问复选框记录列表，因为它现在是不同的 <FORM> 的一部分。

所以我想到了一个使用 JavaScript 的快速解决方案，如果我能以某种方式将 hte 复选框表单字段数组复制到该页面底部的新表单以进行大量记录更新。

我的每条记录旁边的复选框字段现在看起来像这样......

<input id="cb-select-1" type="checkbox" name="record_update[]" value="' . $dbresult->id . '">

那么使用JavaScript是否可以复制record_update[]的内容呢？到页面上不同表单中的另一个新表单字段？

这是一个非常基本形式的更好示例，用于展示我需要完成的任务....

<form name="Form-A" id="form-a">
    <input id="cb-select-1" type="checkbox" name="record_update[]" value="355">
    <input id="cb-select-1" type="checkbox" name="record_update[]" value="455">
    <input id="cb-select-1" type="checkbox" name="record_update[]" value="555">
    ...lots more Database records with a checkbox to select the item for a mass record change
</form>


<form name="Form-B" id="form-b">
    <!-- This hidden field should have an array of all the ID's from form-a that have CHECKED checkboxes ONLY -->
    <input type="hidden" name="record_update_ids">
    <input type="submit" name="" id="doaction2" class="button" value="Update Records">
</form>

大量选择和取消选择我在页面上的复选框的更新代码现在...

<script type="text/javascript">
    function checkAll(bx) {
      var cbs = document.getElementsByTagName("input");
      for(var i=0; i < cbs.length; i++) {
        if(cbs[i].type == "checkbox") {
          cbs[i].checked = bx.checked;
        }
      }
    }
</script>

Answer 1

当您选中一个复选框时，向第二个表单添加一个隐藏的输入:

$("input[name='record_update[]']").click(function(){
    var chkId = $(this).attr('id');
    var chkVal = $(this).val();
    if ($(this).is(':checked'))
        $('<input>').attr({
            type: 'hidden',
            id: 'input_'+chkId,
            name: 'input_'+chkId,
            value: chkVal
        }).appendTo('#secondForm');
    else
        //if isn't checked removes it
        $('#input_'+chkId).remove(); 
});

当您单击“全部选中”按钮时，将所有内容添加到文本区域:

$("#chkAl").click(function(){
    $("input[name='record_update[]']").click(function(){
        //skips the already checked
        if (!($(this).is(':checked')))
            $(this).click();
    });
});