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

我有这个代码，这是完美的工作，它可以切换输入时，复选框被选中

但是，如果有一天我想添加更多的复选框，我必须复制我的代码，而这不是我想要的。我想改进我的代码，使每个复选框都具有相同的功能，而无需在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>

杰克斯-普雷弗伦斯
炉石
英雄联盟
S'inscrire

感谢您花时间解决我的问题，我希望有足够的信息，祝您有一个充满代码的愉快的一天：）

---

另外，我想在主题开始时说“你好”，但当我发布消息时它就消失了：（

您可以使用

$（this）.parent（）.next（）

$（this）

-将返回到正在单击的当前复选框

$（this）.parent（）

-将返回复选框的父项。该复选框是基于html代码的

$（this）.parent（）.next（）

-将返回父元素的下一个元素，即输入文本

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

由于您已经找到了正确的元素（文本输入），现在可以执行诸如

show（）

或

hide（）

之类的操作。例如：

$（this）.parent（）.next（）.hide（）

---

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

$（文档）.ready（函数（）{
$（“.checkbox输入[type=checkbox]”。单击（函数（）{
if（$（this）.is（“：checked”）$（this.parent（）.next（）.show（）；
else$（this.parent（）.next（）.hide（）；
});
//最初隐藏输入
$（“.checkbox输入[type=text]”）.hide（）；
})；

杰克斯-普雷弗伦斯
炉石
英雄联盟
S'inscrire

像

代码审查

或

改进代码

这样的问题在我不知道的地方有合适的听众，对不起，非常感谢：）你能更具体地说明什么是家长和下一个吗？添加了一些解释，如果你有问题请告诉我：）好的，我理解你的解释，非常感谢：D