jQuery 用收音机克隆

Question

如果我使用 jquery clone 方法，我无法 $_POST 收音机和收音机选择。

下面的代码我有性别选择。如果用户可以单击添加更多 link 克隆性别并附加到相同的表单。

HTML

<form action="test.php" method="post">
<div id="one">
    <input type="radio" name="gender" value="1" />Male<br />
    <input type="radio" name="gender"  value="2" />Female<br />
</div>
<div id="appendBefore"></div>
<a href="#" onclick="addMore();">Add More</a>
</form>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function addMore(){
    var copy_ = $("#one").clone();
    copy_.insertBefore('#appendBefore');
}
</script>

PHP

print_r($_POST);

Q - 1. Radio not checked properly.

Q - 2. Radio not posted properly in php.

谢谢。

Answer 1

问题在这里：

<input type="radio" name="gender" value="1" />Male<br />
<input type="radio" name="gender"  value="2" />Female<br />

同一组（同名）只能查看一台收音机。在您克隆并附加收音机的情况下，新组也具有相同的名称，这就是为什么您只能 select 所有收音机中的一个。

要解决此问题，您必须为每个组设置不同的收音机名称。维护一个类似名称的计数器，一切都会好起来的。

例如：

<p>
Block 1
</p>
<input type="radio" name="gender1" value="1" />Male<br />
<input type="radio" name="gender1"  value="2" />Female<br />
<p>
Block 2
</p>
<input type="radio" name="gender2" value="1" />Male<br />
<input type="radio" name="gender2"  value="2" />Female<br />

JSFiddle with proposed solution

jQuery 用收音机克隆

jQuery clone with radio

php

jquery

post

clone