javascript - 如何根据前一个复选框显示一组复选框

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;
	}		
													
?>	

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

这是第一个复选框列表的图像或 UI

这是我的第二个复选框列表的 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

您可以像下面这样使用，

您还可以使用php使其动态

$(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>