克隆具有不同名称的复选框
克隆具有不同名称的复选框
提问于 2014-11-26 05:15:10
为了更好地理解我想要做什么，这里有一个屏幕截图
我希望能够提交复选框是否被选中。为此，我使用了隐藏输入字段的技巧，因为否则不会提交未选中的框。我现在想要做的是给对(一个隐藏的，一个复选框)相同的名称，但每对都有不同的名称。我尝试了相当多的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">谢谢你的帮忙!
Stack Overflow用户
发布于 2014-11-26 05:46:45
给复选框一个类(例如"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);
});..then使用".remButton“选择器并添加一个将删除tr元素的click事件。
最后但并非最不重要的一点是，这是一个很好的示例，说明为什么要从AngularJS开始。它只有一个控制器，一个带有"ng-repeat“的div和几个方法。试试看;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27136796
复制相关文章
相似问题
腾讯云开发者
