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]重點在最小 - 有很多重複的代碼，這可能存在於您的原始，但不有助於隔離潛在的問題。 –