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

Javascript 克隆具有不同名称的复选框,javascript,jquery,html,checkbox,clone,Javascript,Jquery,Html,Checkbox,Clone,为了更好地理解我想做什么,这里有一个截图 我想能够提交是否选中复选框与否。为此,我使用了隐藏输入字段的技巧,因为未选中的框不会提交。我现在想做的是给这些对(一个隐藏,一个复选框)起相同的名字,但每对都有不同的名字。我尝试了很多javascript和jQuery,但不知道如何做到这一点。“+”按钮用于添加更多复选框,“-”按钮用于再次删除复选框 <html> <head> <title>test</title> <script type="t

为了更好地理解我想做什么,这里有一个截图

我想能够提交是否选中复选框与否。为此,我使用了隐藏输入字段的技巧,因为未选中的框不会提交。我现在想做的是给这些对(一个隐藏,一个复选框)起相同的名字,但每对都有不同的名字。我尝试了很多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>

测验
功能克隆(按钮,对象)
{
tmpvalue=document.test.elements['param[]'][1]。值;
document.test.elements['param[]'][1]。值=“”;
var clone_me=document.getElementById(objid.firstChild.cloneNode(true);
button.parentNode.insertBefore(克隆,按钮);
document.test.elements['param[]'][1]。value=tmpvalue;
}
删除此功能(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode.parentNode);
}
参数:
提交
因此,如果有这样的计数器,那就太好了:

<input name="param[i]" type='hidden' value="0">
Parameter: <input name="param[i]" type="checkbox" value="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..
    });
});
$('#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);
});
在添加新行方面,点击“加号”按钮。尝试考虑jquery的“Append”方法。就这样

// 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..
    });
});
$('#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);
});
$('#plusButtonId')。单击(函数(){
var rowHtml='参数:';
$(“#表”).append(rowHtml);
});
…然后使用“.remButton”选择器并添加一个将删除该tr元素的单击事件

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

我无法加载你的图像(我的网络会阻止它),因此,一般来说,当你想克隆东西时,你应该1)制作一个没有ID的模板,如纯html中的
,包装在
显示:none
元素中,然后2)使用$.clone()jQuery创建副本,3)使用还存储计数器的功能更新名称/ID/标签。这里面有一些逻辑:然后4)将克隆实际附加到DOM中