如何根据上一个复选框显示一组Checkbox

Question

我的表单上有一个复选框列表。当用户选择“实验室”时，我希望显示第二个复选框列表。我不希望在他们点击“实验室”复选框之前显示第二个复选框列表。

如何在Javascript或jQuery中完成此操作？

这是第一个复选框列表

的php代码

<?php
	$tsql = "select medTestName from medtest";
  $tstmt = $con->prepare($tsql);
  $tstmt->execute();
  $tstmt->bind_result($mtn);
$tstmt->store_result();
													
while ($tstmt->fetch()){
$d1= '<input type="checkbox" name="test[]"
																  value="'.$mtn.'">'.$mtn.'<br>';
echo $d1;
	}		
													
?>	

这是数据库的图像，它是第一个复选框列表

这是第一个复选框列表

的图像或用户界面

这是我的第二个复选框列表

的html代码

<div><input type="checkbox" name="topic" value="1"><span>Complete Blood Count</span></div>
<div><input type="checkbox" name="topic" value="2"><span>Blood Typing</span></div>
<div><input type="checkbox" name="topic" value="3"><span>Urinalysis</span></div>
<div><input type="checkbox" name="topic" value="4"><span>RPR/TPHA</span></div>
<div><input type="checkbox" name="topic" value="5"><span>Hepatitis B screening</span></div>
<div><input type="checkbox" name="topic" value="6"><span>Fasting Blood Sugar</span></div>
<div><input type="checkbox" name="topic" value="7"><span>Creatinine</span></div>
<div><input type="checkbox" name="topic" value="8"><span>Total Cholesterol(Low Cholesterol, High Cholesterol)</span></div>
<div><input type="checkbox" name="topic" value="9"><span>Triglyceride</span></div>
<div><input type="checkbox" name="topic" value="10"><span>VLDL</span></div>
<div><input type="checkbox" name="topic" value="11"><span>Blood Uric Acid</span></div>
<div><input type="checkbox" name="topic" value="12"><span>Anti-HAV Igm Screening</span></div>
<div><input type="checkbox" name="topic" value="13"><span>Anti HBaAg</span></div>
<div><input type="checkbox" name="topic" value="14"><span>Drug & Alcohol Test</span></div>
<div><input type="checkbox" name="topic" value="15"><span>Stool Culture</span></div>

Answer 1

您可以使用以下内容，

此外，您可以使用$(document).ready(function() { //initially hide all the sub lists $(".sublists").children().each(function() { if ($(this).attr("data-sub-list") == "true") { $(this).hide(); } }); // when you click the checkbox show Radiology,Radiology or ect. $("input[name=test]").click(function() { var list = $(this).attr("data-list"); console.log(list); if ($(this).prop('checked')) { $("#" + list + "").show(); } else { $("#" + list + "").hide(); } }); });

使其动态化

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-7">
  <input type="checkbox" name="test" id="Radiology" value="Radiology" data-list="Radiology-list">Radiology
  <input type="checkbox" name="test" id="Laboratory" value="Laboratory" data-list="Laboratory-list">Laboratory
</div>
<div class="sublists">
  <div id="Laboratory-list" data-sub-list="true">
    <h4>Laboratory list</h4>

    <div class="col-xs-7">
      <input type="checkbox" name="topic" value="Creatinine">Creatinine
      <input type="checkbox" name="topic" value="Triglyceride">Triglyceride
      <input type="checkbox" name="topic" value="VLDL">VLDL
    </div>

  </div>
  <div id="Radiology-list" data-sub-list="true">
    <h4>Radiology list</h4>

    <div class="col-xs-7">
      <input type="checkbox" name="topic" value="one">One
      <input type="checkbox" name="topic" value="two">Two
    </div>

  </div>
</div>

{{1}}

Answer 2

在所有情况下，你必须生成它（例如在隐藏的ul中）并使用jQuery显示它，如$（“＃mydiv”）。toggle（）; 这是jsfiddle：https://jsfiddle.net/6ufzban3/

Answer 3

您可以使用JQuery .toggle()函数来显示/隐藏元素。

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).attr("value") == "lab") {
      $(".labboxes").toggle();
    }
  });
});

.labboxes {
  margin: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">Radiology
<input type="checkbox" value="lab">Laboratory
<div class="labboxes">
  <div>
    <input type="checkbox" name="topic"><span>Triglyceride</span>
  </div>
  <div>
    <input type="checkbox" name="topic"><span>VLDL</span>
  </div>
  <div>
    <input type="checkbox" name="topic"><span>Creatinine</span>
  </div>
</div>

Answer 4

＆＃13;

＆＃13;

<?php
    $tsql = "select medTestName from medtest";
    $tstmt = $con->prepare($tsql);
    $tstmt->execute();
    $tstmt->bind_result($mtn);
    $tstmt->store_result();
											
    while ($tstmt->fetch()){
        $d1= '<input type="checkbox" name="test[]" value="'.$mtn.'">'.$mtn.'<br>';
        echo $d1;
    }		
													
?>	

＆＃13;

＆＃13;

＆＃13;