2017-02-10 61 views
-1

如代码所示,我有两个动态测试输入字段,一个带有单选按钮,另一个带有复选框。动态输入文本字段不会改变,单选按钮Jquery

带复选框的那个正在工作,而带单选按钮的则没有。有人可以帮助破坏这里的东西吗?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 
    <script> 
 
    $(document).ready(function($) { 
 
    $('input.maxtickets_enable_cb').change(function() { 
 
     if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show(); 
 
     else $(this).parent().children('div.max_tickets').hide(); 
 
    }).change(); 
 
    $('#contact_form').bootstrapValidator({ 
 
     feedbackIcons: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
      first_name: { 
 
      validators: { 
 
       stringLength: { 
 
       min: 2, 
 
       }, 
 
       notEmpty: { 
 
       message: 'your first name' 
 
       } 
 
      } 
 
      } 
 
     } 
 
     }) 
 
     .on('success.form.bv', function(e) { 
 
     $('#success_message').slideDown({ 
 
      opacity: "show" 
 
     }, "slow") 
 
     $('#contact_form').data('bootstrapValidator').resetForm(); 
 
     e.preventDefault(); 
 
     var $form = $(e.target); 
 

 
     var bv = $form.data('bootstrapValidator'); 
 

 
     $.post($form.attr('action'), $form.serialize(), function(result) { 
 
      console.log(result); 
 
     }, 'json'); 
 
     }); 
 
    }); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
    $("input[name='chkPassPort']").click(function() { 
 
     if ($("#chkYes").is(":checked")) { 
 
     $("#dvPassport").show(); 
 
     } else { 
 
     $("#dvPassport").hide(); 
 
     } 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<div class="row"> 
 
    <div class="col-md-10" style="padding: 0; height:20%;"> 
 
    <div class="panel panel-default"> 
 
     <span>Do you have Passport?</span> 
 
     <label for="chkYes"> 
 
     <input type="radio" id="chkYes" name="chkPassPort" /> Yes 
 
     </label> 
 
     <label for="chkNo"> 
 
     <input type="radio" id="chkNo" name="chkPassPort" /> No 
 
     </label> 
 
     <hr /> 
 
     <div id="dvPassport" style="display: none"> 
 
     Passport Number: 
 
     <input type="text" id="txtPassportNumber" /> 
 
     </div> 
 
     <form action=""> 
 
     <div id="opwp_woo_tickets"> 
 
      <div> 
 
      <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]"> 
 
      <div class="max_tickets"> 
 
       <input type="text" name="opwp_wootickets[tickets][0][maxtickets]"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    <!-- /.container --> 
 
    <div class="container"> 
 
     <form class="well form-horizontal" action="" method="post" id="contact_form"> 
 
     <fieldset> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label">First Name</label> 
 
      <div class="col-md-4 inputGroupContainer"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
       <input name="first_name" placeholder="First Name" class="form-control" type="text"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

回答

0

有几个问题在这里:

  1. 您的检查无线电投入并不需要在一个单独的标签<script>,应该是你的主要$(document).ready函数中的功能。

  2. 不要把$("input[name='chkPassPort']").click(function(){})放在另一个“函数”中。

有了这些改变你的代码,你可以看到,无线电响应,因为它应该:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 
    <script> 
 
    $(document).ready(function($) { 
 

 
     //Moved inside $(document).ready() 
 
     $("input[name='chkPassPort']").click(function() {  
 
     if ($("#chkYes").is(":checked")) {                
 
      $("#dvPassport").show();            
 
     } else {                
 
      $("#dvPassport").hide();            
 
     }        
 
     }); 
 

 
     $('input.maxtickets_enable_cb').change(function() { 
 
     if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show(); 
 
     else $(this).parent().children('div.max_tickets').hide(); 
 
     }).change(); 
 
     $('#contact_form').bootstrapValidator({ 
 
      feedbackIcons: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
      }, 
 
      fields: { 
 
      first_name: { 
 
       validators: { 
 
       stringLength: { 
 
        min: 2, 
 
       }, 
 
       notEmpty: { 
 
        message: 'your first name' 
 
       } 
 
       } 
 
      } 
 
      } 
 
     }) 
 
     .on('success.form.bv', function(e) { 
 
      $('#success_message').slideDown({ 
 
      opacity: "show" 
 
      }, "slow") 
 
      $('#contact_form').data('bootstrapValidator').resetForm(); 
 
      e.preventDefault(); 
 
      var $form = $(e.target); 
 

 
      var bv = $form.data('bootstrapValidator'); 
 

 
      $.post($form.attr('action'), $form.serialize(), function(result) { 
 
      console.log(result); 
 
      }, 'json'); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 
<div class="row"> 
 
    <div class="col-md-10" style="padding: 0; height:20%;"> 
 
    <div class="panel panel-default"> 
 
     <span>Do you have Passport?</span> 
 
     <label for="chkYes"> 
 
     <input type="radio" id="chkYes" name="chkPassPort" />Yes 
 
     </label> 
 
     <label for="chkNo"> 
 
     <input type="radio" id="chkNo" name="chkPassPort" />No 
 
     </label> 
 
     <hr /> 
 
     <div id="dvPassport" style="display: none"> 
 
     Passport Number: 
 
     <input type="text" id="txtPassportNumber" /> 
 
     </div> 
 

 
     <form action=""> 
 
     <div id="opwp_woo_tickets"> 
 
      <div> 
 
      <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]"> 
 
      <div class="max_tickets"> 
 
       <input type="text" name="opwp_wootickets[tickets][0][maxtickets]"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    <!-- /.container --> 
 

 

 
    <div class="container"> 
 

 
     <form class="well form-horizontal" action="" method="post" id="contact_form"> 
 
     <fieldset> 
 

 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label">First Name</label> 
 
      <div class="col-md-4 inputGroupContainer"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
       <input name="first_name" placeholder="First Name" class="form-control" type="text"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

0

只需推动这个代码$(document).ready函数。 https://jsfiddle.net/6qvy102s/

 $("input[name='chkPassPort']").click(function() { 
       if ($("#chkYes").is(":checked")) { 
        $("#dvPassport").show(); 
       } else { 
        $("#dvPassport").hide(); 
       }   
}); 
0
$(document).ready(function() { 
    $("input[name='chkPassPort']").click(function() { 
     if ($("#chkYes").is(":checked")) { 
      $("#dvPassport").show(); 
     } else { 
      $("#dvPassport").hide(); 
     } 
    }); 
}); 
相关问题