javascript - 在动态表单上保留单选按钮的值

Question

我的脚本:

var rowNum = 0;
function addRow(frm) {

   var rowNum = $('#itemRows tr:last').attr("id");
   rowNum++;
  var row = '<tr id="'+rowNum+'"><td>'+rowNum+'</td><td><input type="text" name="nama[]" class="form-control" maxlength="10"></td><td> <div class="radio"><label><input name="gender" type="radio" value="man" checked="checked" />Laki-laki</label></div><div class="radio"><label><input name="gender" type="radio" value="woman" />Perempuan</label></div></td><td><input type="text" name="weight[]" class="form-control" maxlength="10"></td><td><input type="text" name="height[]" class="form-control" maxlength="10"></td><td><input type="text" name="lla[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgl[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgg[]" class="form-control" maxlength="4"></td><td><input type="text" name="tlk[]" class="form-control" maxlength="4"></td><td><input type="button" class="btn btn-warning btn-sm" value="Remove" onclick="removeRow('+rowNum+');"></td></tr>';
   jQuery('#itemRows').append(row);
   frm.add_qty.value = '';
   frm.add_name.value = '';

}

function removeRow(rnum) {
  jQuery('#'+rnum).remove();
  //susahnya ini kodong,....lamanya saya buat ini
  $('tr').not(':first').each(function() {
        $(this).children('td').first().html($(this).index()); 
        $(this).attr('id',$(this).index());
        var remo = 'removeRow('+$(this).index()+');';
        $(this).find('.btn-remo').attr("onclick",remo);

    });
}

html 看起来像这样:

<form action="hasilObes.php" method="get" name="obes">
<table class="table table-striped" id="itemRows" cellpadding="3">
  <tr id="0">
    <th scope="col">No.</th>
    <th scope="col">Nama</th>
    <th scope="col">Gender</th>
    <th scope="col">BB</th>
    <th scope="col">TB</th>
    <th scope="col">LLA</th>
    <th scope="col">LPGI</th>
    <th scope="col">LPGG</th>
    <th scope="col">TLK</th>
    <th scope="col"><input class="btn btn-remo btn-info" onclick="addRow(this.form);" type="button" value="Tambah" /></th>
  </tr>


</table>


<input class="btn btn-success" type="submit" name="submit" value="kalkulasi" />
</form>

如果我单击按钮“tambah”，..则会添加新行，单选按钮(性别)的默认值为“man”，...但如果我随后添加新行，..单选按钮的值(性别)上一行或其他行消失了，现在当我添加新行时如何保留其他行的这个值“男人”/“女人”？

Answer 1

这是因为每次添加行时，您都会添加两个具有相同名称的单选按钮，因此它们属于同一单选按钮组(均名为“性别”)。我建议您只需更改单选按钮的名称，以便每一行都是其自己的组。

在代码的 var row = 行中，更改:

name="gender"

至:

name="row'+rowNum+'gender"

<强> jsFiddle example

这将生成单选按钮组，其中一对单选按钮具有名称，例如:row1gender、row2gender、row3gender 等。