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" />

Answer 2

为复选框更改添加侦听器。

如果您不想第一次看到该复选框，则可以添加一个样式为display：none的样式来隐藏它。

$('#yes').change(
    function(){
        //console.log("check if checked!");
        if ($(this).is(':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" style="display:none;" />

Answer 3

默认情况下，您可以隐藏输入，然后将“单击处理程序”添加到复选框并切换可见性

$(function() {
  $(document).on('click', '#yes', function() {
    $('#phone-num').toggle();
  });
});

#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:<input type="checkbox" name="phone_me" id="yes"  /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />

我正在尝试隐藏输入并使用jquery显示它，但输入未显示

3 个答案: