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

Question

我有一个函数可以根据输入显示和隐藏元素。当检查复选框或将任何文本输入到文本框中时，将显示一个特定的消息框。当复选框未选中或文本框中没有文本时，消息应该消失。我设法实现了文本框的功能以及显示消息但不切换的复选框功能。有人可以帮我弄清楚为什么取消选中复选框时消息不会隐藏吗？

非常感谢。

笔 - 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{ 显示：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>

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

Toggling visibility using same function on checkbox and text box

checkbox

jquery

toggle

show-hide