0
我正在开发一个IBM项目，由于隐私原因，我无法向您显示确切的内容。jQuery .show（）.hide（）不起作用
我是JS和AngularJS的新手，对jQuery根本不了解。我想在相应的复选框被选中时显示特定的div部分。我使用JS和AngularJS尝试了这一点，但没有结果。请查看代码并请帮助我。此外，如果有任何方式使用JS/AngularJS理清问题（更优选，AngularJS），这将是一个容易得多
代码：
var checkbox1 = $("#check1");
checkbox1.change(function(event) {
var checkbox1 = event.target;
if (checkbox1.checked) {
$("#userform2").show();
} else {
$("#userform2").hide();
}
});
var checkbox2 = $("#check2");
checkbox2.change(function(event) {
var checkbox2 = event.target;
if (checkbox2.checked) {
$("#userform4").show();
} else {
$("#userform4").hide();
}
});
var checkbox3 = $("#check3");
checkbox3.change(function(event) {
var checkbox3 = event.target;
if (checkbox3.checked) {
$("#userform5").show();
} else {
$("#userform5").hide();
}
});
var checkbox4 = $("#check4");
checkbox4.change(function(event) {
var checkbox4 = event.target;
if (checkbox4.checked) {
$("#userform3").show();
} else {
$("#userform3").hide();
}
});
var checkbox5 = $("#check5");
checkbox5.change(function(event) {
var checkbox5 = event.target;
if (checkbox5.checked) {
$("#userform6").show();
} else {
$("#userform6").hide();
}
});
var checkbox6 = $("#check6");
checkbox6.change(function(event) {
var checkbox6 = event.target;
if (checkbox6.checked) {
$("#userform7").show();
} else {
$("#userform7").hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<body id="ibm-com" class="ibm-type">
<div id="ibm-top" class="ibm-landing-page">
<div id="ibm-content-wrapper">
<div class="ibm-columns">
<div class="ibm-col-6-1"> </div>
<div class="ibm-col-6-4">
<form id="userform1" class="ibm-column-form" method="post" action="">
<br />
<h2 class="ibm-h2">Random Title 1</h2>
<p class="ibm-form-elem-grp">
<label class="ibm-form-grp-lbl">Type of Request:</label>
<span class="ibm-input-group">
\t <input id="check1" name="requestType1" type="checkbox" /> Checkbox #1 \t \t \t
\t <br /><input id="check2" name="requestType1" type="checkbox" /> Checkbox #2
<br /><input id="check3" name="requestType1" type="checkbox" /> Checkbox #3
\t <br /><input id="check4" name="requestType1" type="checkbox" /> Checkbox #4
\t <br /><input id="check5" name="requestType1" type="checkbox" /> Checkbox #5
\t <br /><input id="check6" name="requestType1" type="checkbox" /> Checkbox #6
\t </span>
</p>
<div id="userform2" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 2</h2>
<p>
Hello from Checkbox #1
</p>
</div>
<div id="userform3" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 3</h2>
<p>
Hello from Checkbox #4
</p>
</div>
<div id="userform4" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 4</h2>
<p class="ibm-form-elem-grp">
Hello from Checkbox #2
</p>
</div>
<div id="userform5" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 5</h2>
<p>
Hello from Checkbox #3
</p>
</div>
<div id="userform6" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 6</h2>
<p>
Hello from Checkbox #5
</p>
</div>
<div id="userform7" class="ibm-column-form" hidden>
<br />
<h2 class="ibm-h2">Random Title 7</h2>
<p>
Hello from Checkbox #6
</p>
</div>
<div id="userform8" class="ibm-column-form">
<br />
<h2 class="ibm-h2">Random Title 8</h2>
<p>
Bye
</p>
<br />
</div>
</form>
</div>
<div class="ibm-col-6-1"> </div>
</div>
</div>
</div>
它看起来确定你能指望什么？ – guradio
可能重复[如何显示/隐藏基于角js中的复选框选择div]（http://stackoverflow.com/questions/21748594/how-to-show-hide-a-div-on-这个基础的一个复选框选择在角js） – Weedoze
请阅读这个[mcve]重点在最小 - 有很多重复的代码，这可能存在于您的原始，但不有助于隔离潜在的问题。 –