如何隐藏单选按钮选择的输入字段

Question

我有四个单选按钮（固定，百分比，每月，每年），两个按钮具有公共字段，另外两个具有公共字段。我创建了两个div用于固定和百分比以及其他每月和每年添加更多按钮。问题是，当我输入数据为每月股利（多行），我得到的数据，但第零的位置是空白的，它被存储在数据库中为0.解决方案是只有一个股利，并基于收音机按钮我只需要隐藏和显示字段，这就是我想要的。

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> 

HTML代码为固定/个DIV

<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>&nbsp;</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>&nbsp;</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> 

的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>&nbsp;</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>&nbsp;</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> 

Answer 1

所以你试图使用该值切换？那么，当你得到的价值，你使用this.value - 我已经改变，使用jQuery的$（this）.val（）

此外，而不是使用ifs，你是使用，我用了一个开关盒 - 在我的老眼睛上更容易。

如果这些都不是你想要的，请告诉我。如果需要，我会根据您的意见编辑javascript。

所以，在检查你的评论时，我意识到我完全错过了这个问题。您可能需要考虑的是将EACH表单创建为单独的实体 - 当您有多个具有相同名称的字段时（如显示任一表单时显示的start_date和end_date），您遇到的问题就会发生。

我编辑了演示文稿，以创建每个切换元素作为自己的窗体，在此迭代中，当您单击“添加更多”按钮时，它只是将序列化窗体数据记录到控制台，以便显示您没有在序列化流中获取空格式数据。

希望这会有所帮助！

$(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; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
<form name="fixedForm"> 
 
    <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>&nbsp;</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>&nbsp;</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> 
 
</form> 
 
<form name="monYearForm"> 
 
    <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>&nbsp;</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>&nbsp;</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> 
 

 
</form>