克隆具有不同名称的复选框答案

【问题标题】：Cloning Checkboxes with different names克隆具有不同名称的复选框
【发布时间】：2015-01-24 01:14:27
【问题描述】：

为了更好地理解我想要做什么，这里是一个截图

我希望能够提交复选框是否被选中。为此，我使用了隐藏输入字段的技巧，因为否则不会提交未选中的框。我现在要做的是给对（一个隐藏，一个复选框）相同的名称，但每对都有不同的名称。我用 javascript 和 jQuery 尝试了很多，但不知道如何完成这项工作。 “+”按钮用于添加更多复选框，“-”按钮用于再次删除它们。

<html>
<head>
<title>test</title>
<script type="text/javascript">
function clone(button, objid)
{
    tmpvalue = document.test.elements['param[]'][1].value;

    document.test.elements['param[]'][1].value = '';

    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    button.parentNode.insertBefore(clone_me, button);

    document.test.elements['param[]'][1].value = tmpvalue;
}

function remove_this(objLink)
{
    objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
</script>
</head>
<body>
<form name="test" method="post" action="test2.php">
    <input name="param[0]" value="0" type="hidden">

    <div id="hidden" style="visibility:hidden; display:none">
    <div id="table"><table>
        <tr><td>
            <input name="param[]" type='hidden' value="0">
            Parameter: <input name="param[]" type="checkbox" value="1">
        </td>
        <td>
            <span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button">
        </td>
        </tr>
    </table></div>  
    </div>

    <div>
        <input  style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button">
        <button type="submit" name="sent">Submit</button>
    </div>
</form>
</body>
</html>

因此，如果有这样的计数器实际上会很好：

<input name="param[i]" type='hidden' value="0">
Parameter: <input name="param[i]" type="checkbox" value="1">

感谢您的帮助！

【问题讨论】：

我无法加载你的图片（我的网络阻止了它）所以说，一般来说，当你想克隆东西时，你应该 1）制作一个没有像 <input name="field_"> 这样的 id 的模板纯 html，包装在 display:none 元素中，然后 2) 使用 $.clone() jQuery 创建副本，3) 使用还存储计数器的函数更新名称/ID/标签。这个小提琴中有一些逻辑：jsfiddle.net/briansol/5h4cM/1 然后 4) 实际上将克隆附加到 DOM

标签： javascript jquery html checkbox clone

【解决方案1】：

给你的复选框一个类（例如“checkClass”）然后使用 jQuery 扫描这个类的所有元素怎么样？就这样..

// instead of $('button[type="submit"]') give your button an ID and use # selector
$('button[type="submit"]').click(function(){
    //lets get all checkboxes..
    $('.checkClass').each(function(){
        // get their checked status
        var checked = $(this).is(':checked');
        // ..and do whatever you need here..
    });
});

就“加号”按钮单击添加新行而言。尝试考虑 jquery “Append” 方法。就这样..

$('#plusButtonId').click(function(){
    var rowHtml = '<tr><td>Parameter: <input name="param[]" type="checkbox" class="checkClass" value="1"></td><td><input value="-" type="button" class="remButton"></td></tr>';
    $('#table').append(rowHtml);
});

..然后使用“.remButton”选择器并添加一个单击事件，该事件将删除该 tr 元素。

最后但并非最不重要 - 这是一个很好的例子，为什么要从 AngularJS 开始。它只是一个控制器，一个带有“ng-repeat”的div和一些方法。试试看；）

【讨论】：