Jquery - 在复选框后切换输入​​文本

Question

我有这段代码可以完美运行，它可以在选中复选框时切换输入。

https://jsfiddle.net/majmo6r4/

但是，如果有一天我想添加更多复选框，我必须复制我的代码，这不是我想要的。我想改进我的代码，以便每个复选框具有相同的功能，而无需创建另一个类并在我的 js 文件上复制我的 if 语句和变量。

我有这样的想法：

(function($){
function $test() {
    let $cbs = $(".cbTeam");
    $cbs.each(function () {
        let $inputs = $('.inputTeam');
        if($cbs.siblings().is(':checked')) {
            $inputs.css("display", "flex");
        } else {
            $inputs.css("display", "none");
        }
    });
}
$(this).click($test);
}(jQuery));

对于每个复选框，我可以切换他的输入，因此我需要考虑复选框具有相同的类名并且输入也是。

<div class="form-group">
            <label>Jeux - Préférences</label>
                    <div class="checkbox">
                        <label><input type="checkbox" class="cbTeam" value="">Hearthstone</label>
                        <input type="text" class="form-control inputTeam" placeholder="Equipe Hearthstone">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" class="cbTeam" value="">League of Legends</label>
                        <input type="text" class="form-control inputTeam" placeholder="Equipe LoL">
                    </div>
            <button type="submit" class="btn btn-default">S'inscrire</button>
        </div>

感谢您花时间解决我的问题，我希望有足够的信息，并有一个充满代码的美好一天:)

附：我想在主题开始时说“你好”，但当我发布消息时它消失了:(

Answer 1

您可以使用$(this).parent().next()显示/隐藏输入文本

$(this) - 将返回到当前被点击的复选框。

$(this).parent() - 将返回复选框的父级。哪个是 <label> 基于您的 html 代码。

$(this).parent().next() - 将返回父元素的下一个元素，即输入文本。

基本上，您正在尝试定位输入文本（一次一步）并对其执行一些操作。

由于您已经找到了正确的元素（文本输入），您现在可以执行show() 或hide() 之类的操作。示例：$(this).parent().next().hide()

---

文本输入是复选框父级的下一个元素。

$(document).ready(function() {
  $(".checkbox input[type=checkbox]").click(function() {
    if ($(this).is(":checked")) $(this).parent().next().show();
    else $(this).parent().next().hide();
  });

  //Hide inputs initially
  $(".checkbox input[type=text]").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Jeux - Préférences</label>
  <div class="checkbox">
    <label>
		    <input type="checkbox" class="cbHs" value="">Hearthstone
		</label>
    <input type="text" class="form-control teamHs" placeholder="Equipe Hearthstone">
  </div>
  <div class="checkbox">
    <label>
		     <input type="checkbox" class="cbTeam" value="">League of Legends
		</label>
    <input type="text" class="form-control inputTeam" placeholder="Equipe LoL">
  </div>
  <button type="submit" class="btn btn-default">S'inscrire</button>
</div>