如何将复选框表单字段从一个表单复制到另一个

How to copy checkbox form fields from 1 form to another?

本文关键字：表单 一个 复制 另一个 复选框 字段      更新时间：2023-09-26

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

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

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

的一部分

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

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

<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>

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

$("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(); 
});

当你点击'Check All'按钮时，将所有添加到文本区域:

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

您可以使用http://api.jquery.com/clone/

http://jsfiddle.net/MA3x4/1/

在文档准备中执行以下操作

$('#form-a').find('input:checkbox[name="record_update[]"]').each(function () {
    $(this).clone().appendTo('#form-b');
});
相关文章：