我有四个单选按钮（固定，百分比，月，年），两个按钮有公共字段，另外两个有公共字段。我创建了两个div，一个用于固定和百分比，另一个用于月度和年度，添加更多按钮。问题是当我输入每月div的数据（有多行）时，我得到数据但第0位是空白，它在数据库中存储为0.解决方法是只有一个div并基于无线电按钮我只需要隐藏和显示字段，这就是我想要的。
标签的HTML代码
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
固定/百分比div的Html代码
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tbl' >
<tr>
<td width = '20%'>Start price</td>
<td width = '20%'>End price</td>
<td width = '20%'>Start date</td>
<td width = '20%'>End date</td>
<td width = '20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
<td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="6" align = "center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
每月/固定div的Html
<div id="monYearDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tb2' >
<tr>
<td width = '30%'>Start date</td>
<td width = '30%'>End date</td>
<td width = '30%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="4" align = "center">
<input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Jquery代码：
<script>
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=comission_type]').change(function() {
if (this.value == '0' || this.value == '1') {
$("#fixPerDiv").css("display","block");
$("#monYearDiv").css("display","none");
}
else if (this.value == '2' || this.value == '3') {
$("#fixPerDiv").css("display","none");
$("#monYearDiv").css("display","block");
}
});
});
</script>
答案 0 :(得分：1)
所以你试图用这个值来切换？好吧，当你获得该值时，你正在使用this.value - 我已经改为使用jQuery的$（this）.val（）
另外，我没有使用你正在使用的ifs，而是使用了一个开关盒 - 在我的老眼睛上更容易。
如果这些不是你想要的，请告诉我。如果需要，我会根据您的评论编辑javascript。
所以，在检查你的评论时，我意识到我完全错过了这个问题。您可能需要考虑的是将EACH表单创建为一个单独的实体 - 当您有多个具有相同名称的字段（如显示任一表单时出现的start_date和end_date）时，您遇到的问题就会发生。
我编辑了演示，将每个切换元素创建为自己的形式，在此迭代中，当您单击“添加更多”按钮时，它只是将序列化的表单数据记录到控制台，以便显示您没有在序列化流中获取空表单数据。
希望这有帮助！
options(scipen=999)$(document).ready(function() {
$('input[type=radio][name=comission_type]').on("change", function() {
toggleDivs($(this).val())
});
$("input[type='button']" ).on("click", function(){
console.log($(this).parents("form").serialize() );
})
function toggleDivs(toggleVal) {
console.log(toggleVal)
switch (toggleVal) {
case '0':
case '1':
$("#fixPerDiv").show();
$("#monYearDiv").hide();
break;
case '2':
case '3':
$("#fixPerDiv").hide();
$("#monYearDiv").show();
break;
}
}
});