使用复选框和文本框上的相同功能切换可见性[重复]

Question

这个问题在这里已有答案：

• Check if checkbox is checked with jQuery 21个答案

我有一个功能来显示和隐藏基于输入的元素。选中复选框或在文本框中输入任何文本时，将显示特定的消息框。取消选中该复选框或文本框中没有文本时，该消息应消失。我设法实现文本框的功能以及复选框功能，以显示消息但不切换。有人可以帮我弄清楚当取消选中复选框时，为什么邮件不会被隐藏，好吗？

非常感谢。

笔 - https://codepen.io/anon/pen/yqoRrQ

HTML

<div class="container">
  <div class="form-group checkWrap">
    <label for="exampleInputEmail1">Email address</label>
    <input type="text" class="form-control checkToggle" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
</div>

CSS

.elHidden {display：none;}

JS

   $('.checkToggle').on('change keyup', function () {
      if ($(this).is(':checked') || $(this).val()) {
        $(this).parents('.checkWrap').children('.elHidden').show();
      }
      else {
        $(this).parents('.checkWrap').children('.elHidden').hide();
      }
   });

Answer 1

您可以使用.is()检查当前元素的类型，并检查是否选中了复选框，如：

$('.checkToggle').on('change input', function() {
  var condition;
  var message = $(this).closest('.checkWrap').find('.alert');

  if ($(this).is(':checkbox')) {
    condition = $(this).is(':checked');
  } else {
    condition = $(this).val();
  }

  condition ? message.removeClass('elHidden') : message.addClass('elHidden');
});

.elHidden {
  display: none;
}

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

<div class="container">
  <div class="form-group checkWrap">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control checkToggle" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
</div>

Answer 2

Try this !

$('.checkToggle').on('change keyup', function () {
      
      
      type = $(this).attr("type");
    
      if(type=="checkbox"){      
         if ($(this).is(':checked')){                      $(this).parents('.checkWrap').children('.elHidden').show();
      }
      else {
        $(this).parents('.checkWrap').children('.elHidden').hide();
      }
      }else{      
        if ($(this).val()){                      $(this).parents('.checkWrap').children('.elHidden').show();
      }
      else {
        $(this).parents('.checkWrap').children('.elHidden').hide();
      }
      }
      
      
   });

.container{ margin-top: 30px;}
.elHidden{ display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group checkWrap">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control checkToggle" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  
    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
  
  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>
    
    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
  
  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
    
    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
</div>