jQuery .show（）.hide（）無法正常工作
[英]jQuery .show() .hide() not working
問題描述
我正在從事一個IBM項目，由於隱私原因，我無法向您顯示確切的內容。
我是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"> <input id="check1" name="requestType1" type="checkbox" /> Checkbox #1 <br /><input id="check2" name="requestType1" type="checkbox" /> Checkbox #2 <br /><input id="check3" name="requestType1" type="checkbox" /> Checkbox #3 <br /><input id="check4" name="requestType1" type="checkbox" /> Checkbox #4 <br /><input id="check5" name="requestType1" type="checkbox" /> Checkbox #5 <br /><input id="check6" name="requestType1" type="checkbox" /> Checkbox #6 </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>
4 個解決方案
解決方案1
1 2016-07-05 08:18:29
這是一個如何使用鏈接的復選框隱藏/顯示div的簡單示例。
2 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>
解決方案2
0 2016-07-05 08:30:32
對於jQuery解決方案，這將起作用： jsFiddle
$("input[type=checkbox]").on("change", function() {
var numericId = $(this).attr("id").replace("check",'');
if ($(this).is(":checked")) {
$("#userform" + numericId).show();
} else {
$("#userform" + numericId).hide();
}
});
解決方案3
0 2016-07-05 09:06:09
為了使你的代碼的工作，你應該檢查.prop("checked")而不是檢查屬性checked
例如： $("#check1").prop("checked")
但我建議您使用Bootstrap http://getbootstrap.com/javascript/#tabs
解決方案4
-5 2016-07-05 08:10:24
我相信.change()現在已經死了，應該是on("change", function(){}) ，而不是重復所有代碼，您可以使用$.each語句。 給我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>
這將節省您重復代碼的麻煩。
jQuery顯示/隱藏不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.