Question

我正在从事IBM项目，出于隐私原因，我无法向您展示确切的内容。

我是JS和AngularJS的新手，根本不了解jQuery。我想在选中相应的复选框时显示特定的div部分。我尝试使用JS和AngularJS，但最终没有任何结果。请看一下代码，请帮帮我。此外，如果有任何方法可以使用JS / AngularJS（更好的是，AngularJS）解决问题，那将会容易得多

代码：

＆＃13;

 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();
   }
 });

＆＃13;

<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">&nbsp;</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">&nbsp;</div>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

这是一个如何使用链接复选框隐藏/显示div的简单示例。

两个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>

Working JSFiddle

Answer 2

对于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();
    }
});

Answer 3

要使代码正常运行，您应该检查.prop("checked")，而不是检查属性checked

例如： $("#check1").prop("checked")

但我建议您使用Bootstrap http://getbootstrap.com/javascript/#tabs

Answer 4

我相信.change()已经死了，它应该是on("change", function(){})，而不是重复你可以使用$.each语句的所有代码。给我5分钟，我会写点东西。

如果你想在Jquery中这样做，你可以写这样的东西：

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

您需要做的就是将复选框上相同的ID添加到表单中作为data-id。 E.G：

<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 .show（）。hide（）不起作用

4 个答案: