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

时间:2014-07-30 15:24:39

标签: javascript jquery forms

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

我的问题是我最近在每条记录下的评论部分添加了该评论部分允许快速评论帖子,因此每个记录评论部分都有自己的FORM,这当然打破了我的复选框表格作为评论表格关闭</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>

2 个答案:

答案 0 :(得分:1)

您可以使用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');
});

答案 1 :(得分: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();
    });
});