Javascript jQuery.show（）.hide（）不工作

我正在从事一个IBM项目，由于隐私原因，我无法向您显示确切的内容

我是JS和AngularJS的新手，对jQuery一无所知。我想在选中相应的复选框时显示特定的div部分。我用JS和AngularJS试过了，但结果一无所获。请看一下代码，帮我解决一下。此外，如果有任何方法可以使用JS/AngularJS（最好是AngularJS）来解决问题，那就容易多了

代码：

var checkbox1=$（“#check1”）；
复选框1.更改（功能（事件）{
var checkbox1=event.target；
如果（复选框1.选中）{
$（“#userform2”）.show（）；
}否则{
$（“#userform2”）.hide（）；
}
});
var checkbox2=$（“#check2”）；
复选框2.更改（功能（事件）{
var checkbox2=event.target；
如果（复选框2.选中）{
$（“#userform4”）.show（）；
}否则{
$（“#userform4”）.hide（）；
}
});
var checkbox3=$（“#check3”）；
复选框3.更改（功能（事件）{
var checkbox3=event.target；
如果（复选框3.选中）{
$（“#userform5”）.show（）；
}否则{
$（“#userform5”）.hide（）；
}
});
var checkbox4=$（“#check4”）；
复选框4.更改（功能（事件）{
var checkbox4=event.target；
如果（复选框4.选中）{
$（“#userform3”）.show（）；
}否则{
$（“#userform3”）.hide（）；
}
});
var checkbox5=$（“#check5”）；
复选框5.更改（功能（事件）{
var checkbox5=event.target；
如果（复选框5.选中）{
$（“#userform6”）.show（）；
}否则{
$（“#userform6”）.hide（）；
}
});
var checkbox6=$（“#check6”）；
复选框6.更改（功能（事件）{
var checkbox6=event.target；
如果（复选框6.选中）{
$（“#userform7”）.show（）；
}否则{
$（“#userform7”）.hide（）；
}
});



随机标题1

请求类型：
复选框#1

复选框#2

复选框#3

复选框#4

复选框#5

复选框#6



随机标题2

来自复选框#1的您好



随机标题3

来自复选框4的您好



随机标题4

来自复选框2的您好



随机标题5

来自复选框#3的您好



随机标题6

来自复选框5的您好



随机标题7

来自复选框6的您好



随机标题8

再见



我认为
.change（）
现在已经死了，它应该是
打开（“change”，function（）{}）
，也可以使用
$语句而不是重复所有代码。给我5分钟，我会写点东西

如果您想在Jquery中这样做，可以这样编写：

$('input[type="checkbox"]').on('change', function() {
    var checkboxID = $(this).attr('id');
    $('[data-id="' + checkboxID + '"]').toggle();
});

您需要做的就是将复选框上的相同id作为数据id添加到表单中。例如：

<input id="check6" name="requestType1" type="checkbox" />

<div id="userform6" class="ibm-column-form" hidden data-id="check6">
    <br />
    <h2 class="ibm-h2">Random Title 2</h2>
        <p>
            Hello from Checkbox #1
        </p>
</div>




随机标题2

来自复选框#1的您好


这将节省您重复代码的时间。
下面是一个简单的示例，说明如何使用链接复选框隐藏/显示div

两个div-每个都链接到其复选框

HTML

<input type="checkbox" id="check1" name="Checkbox1" ng-model="checkbox1" />
<input type="checkbox" id="check2" name="Checkbox2" ng-model="checkbox2" />

<div ng-show="checkbox1">
    <h1>This div is shown thanks to checkbox #1</h1>
</div>

<div ng-show="checkbox2">
    <h1>This div is shown thanks to checkbox #2</h1>
</div>


由于复选框#1，显示此div
由于复选框#2，显示此div

对于jQuery解决方案，这将起作用：

要使代码正常工作，您应该检查
.prop（“checked”）
而不是检查属性
checked

例如：
$（“check1”）.prop（“checked”）

但是我建议您使用引导程序
它看起来不错，您期望什么？可能重复的请以最小的强调阅读此内容-有许多重复的代码，这些代码可能存在于您的原始版本中，但无助于隔离潜在的问题。请检查
有一些类型错误。和jQuery在
中使用了一些覆盖
$
，只需打开控制台并检查
$
是否正常即可：您有什么证据表明
.change
已过时？
.change
对动态添加的元素不起作用。对于此类用例，建议使用
.on
或
.bind
。但是如果您有一个静态元素，您可以使用
.change
。仅供参考：刚检查了文档，我把.change错当成了.load、.unload等更改。在jQuery3.0中。
$("input[type=checkbox]").on("change", function() {
    var numericId = $(this).attr("id").replace("check",'');
    if ($(this).is(":checked")) {
        $("#userform" + numericId).show();
    } else {
        $("#userform" + numericId).hide();
    }
});