Question

<input type="checkbox" id="permit">
<input type="text" class="form-control" placeholder="Enter Short Code" name="short_code" id="short_code" autocomplete="off" style="display: none;">

使用jQuery

选中复选框时，如何显示文本框

Answer 1

每当您点击复选框时，您都可以检查:checked属性：

$(document).ready(function(){
  $('#permit').click(function(){
    $(this).is(':checked')? $('#short_code').show(): $('#short_code').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="permit">
<input type="text" class="form-control" placeholder="Enter Short Code" name="short_code" id="short_code" autocomplete="off" style="display: none;">

Answer 2

您可以添加简单的CSS规则。

#permit:not(:checked) + #short_code {
    display: none;
}

Answer 3

解决方案：

    <input type="checkbox" id="permit">
<input type="text" class="form-control" placeholder="Enter Short Code" name="short_code" id="short_code" autocomplete="off" style="display: none;">

＆＃13;

$(function () {
       //show it when the checkbox is clicked
        $('#permit').on('click', function () {
            if ($(this).prop('checked')) {
                $('#short_code').fadeIn();
            } else {
                $('#short_code').hide();
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="permit">
    <input type="text" class="form-control" placeholder="Enter Short Code" name="short_code" id="short_code" autocomplete="off" style="display: none;">

＆＃13;

选中复选框时需要显示文本框

3 个答案: