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

Question

我有四个单选按钮（固定、百分比、每月、每年），两个按钮有公共字段，另外两个有公共字段。我创建了两个 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>&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>

每月/固定 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，而是使用了 switch case——对我的老眼睛来说更容易。

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

因此，在检查您的评论时，我意识到我完全错过了这个问题。您可能需要考虑将每个表单创建为一个单独的实体——当您有多个具有相同名称的字段时会遇到问题（如显示任一表单时出现的 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>