Question

我创建了一个复选框及其2个依赖输入字段，当我选中复选框时出现2个输入字段然后我写了一些但当我取消选中复选框时输入字段无法重置该值并提交前进。当我取消选中时我想要简单，然后复选框，其依赖输入字段将其值重置为默认值。这是我的代码：

<input id="return" type="checkbox" value="" name="return">Return Journey 
<div class="bkt_return_journey" id="altway" style="display: none;">
<input type="text" name="datebr" id="datepickerr" class="booktaxti_input"  /></div>

<script type="text/javascript">
$('#return').live('change', function(){

 if ( $(this).is(':checked') ) {
     $('#altway').show();
 } else {
     $('#altway').hide();
 }
});

</script>

Answer 1

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <input id="return" type="checkbox" value="" name="return">Return Journey 
    <div class="bkt_return_journey" id="altway" style="display: none;">
     <input type="text" name="datebr" id="datepickerr" class="booktaxti_input"  />
    </div>

    <script type="text/javascript">

    $(document).ready(function(){
        $('#return').on('click', function(){

          if ( $(this).is(':checked') ) {
            $('#datepickerr').val('');
             $('#altway').show();
         } else {
             $('#altway').hide();
         }
         });
    });


     </script>
</body>

希望它可以帮助你

Answer 2

<input id="return" type="checkbox" value="" name="return">Return Journey 
<div class="bkt_return_journey" id="altway" style="display: none;">
<input type="text" name="datebr" id="datepickerr" class="booktaxti_input"  /></div>

<script type="text/javascript">
$(document).on('click','#return', function(){
    if ( $(this).is(':checked') ) {
        $('#altway').show();   
    } else {
        $('#altway').hide();
    }
});
</script>

Answer 3

您可以按照以下方式更改代码：

$('#return').on('change', function () {
    if ($(this).is(':checked')) {
        $('#datepickerr').val('');
        $('#altway').show();
    } else {
        $('#altway').hide();
    }
});

取消选中后依赖输入字段的复选框无法重置

3 个答案: