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

Posted 2023-03-05

【中文标题】在复选框和文本框上使用相同的功能切换可见性[重复]

【英文标题】：Toggling visibility using same function on checkbox and text box [duplicate]

【发布时间】：2019-01-03 13:07:10

【问题描述】：

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

非常感谢。

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

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();
      
   );

【问题讨论】：

不，不是！ @zenoo

你正在寻找一种方法来判断 jQuery 中是否选中了复选框。

不是！您是否正确阅读了我的问题？我正在使用相同的功能来检查复选框和文本框。一个正在工作，另一个正在部分工作。开枪前请检查笔！

您在问题中提供的代码不包含任何文本框。更新您的代码以匹配您的请求。人们不应该打开非现场页面来回答。

第一个输入是一个文本框，虽然它是一个电子邮件字段，但在本例中功能相同。

【参考方案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>

【讨论】：

还是不开心，扎卡里亚。

更新了我的帖子@Jayonline

不客气，兄弟...恭喜你，你获得了Vote up privilege 考虑使用它;)

干杯扎卡利亚！我肯定会的

很高兴我能帮助兄弟，Downvoters 无处不在，别担心，忽略他们继续前进......

【参考方案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>

【讨论】：

如果输入不为空，复选框将不起作用。

非常感谢 Akilesh - 这解决了我的问题。愿意解释为什么 $(this).is(':checked') 不起作用？

实际上，我刚刚注意到您已经对输入文本 ID 进行了硬编码，因为我有多个文本框，所以我想避免这种情况？一旦我使用通用格式 $(this).val 它就不起作用了。 :(

@Jayonline 现在，我将动态的条件语句分开，现在修复了吗！