javascript - 我试图隐藏输入并用 jquery 显示它，但输入没有显示

Question

   if($('#yes').prop('checked')){
    
       $('#phone-num').show();  
    }else{

     $('#phone-num').hide();
    
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes"  /></label>   
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />

Answer 1

为了做到这一点，您需要监听您的复选框的点击情况。

您的代码 - 正如您所做的那样 - 仅在页面加载时执行一次。

在下面的代码片段中，一个监听器被添加到复选框中，并且每次单击它时都会触发该监听器。

$('#yes').click(function() {
    var isChecked = $(this).prop('checked');
    if (isChecked) {
        $('#phone-num').show();  
    } else {
        $('#phone-num').hide();
    }
});

#phone-num {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="yes"> Phone Me concerning this case: </label>
<input type="checkbox" name="phone_me" id="yes" />
   
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />