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

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>

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

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