javascript - 无法显示子复选框

Question

我正在处理一个复选框列表，如果选中其中一个复选框，则所有复选框都会出现。我已经通过 php 隐藏了子复选框，但是当我尝试检查允许显示所有子复选框的复选框之一时，它不起作用。

这是我到目前为止所得到的(我还使用 php 来显示和连接存储在数据库中的主复选框列表，正如你所看到的，我使用了准备好的语句 [bind]):

<form action="avfunc.php" method="POST" class="form-horizontal well">
<div id="updatediv">
    <input type="submit" name="update" id="update" value="Update Reference" style="width:100px; display:none;" class="edit" />
</div>
<fieldset>
<div class="row">
    <div class="col-lg-3">
    </div>
    <div class="col-lg-6">
        <?php
            $tsql = "select * from medtest";
            $tstmt = $con->prepare($tsql);
            $tstmt->execute();
            $tstmt->bind_result($mti,$mtn);
            $tstmt->store_result();

            while ($tstmt->fetch()){
                    $d1= '<input type="checkbox" name="test"
                     value="'.$mti.'" onClick="var e=document.getElementById("updatediv"); var s=document.getElementById("update"); e.removeChild(s) ; this.form.submit();">'.$mtn.'<br> ';
                    echo $d1;

            }       

            ?>      
        <?php if($_POST['checkbox'] == "3"){ ?>
        <h4>Laboratory Examination</h4>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <div class="col-xs-2">
                </div>
                <div class="col-xs-7">
                    <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>
                    </div
                    <?php } ?> >
                    <div class="col-xs-3">
                    </div>
                </div>
                <div class="col-lg-6">
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
    </div>
</div>

Answer 1

问题是，当您设置主复选框时，PHP 不会发送“隐藏”HTML - 因此没有内容可以有条件地显示。

您最好使用 CSS 样式 display:hidden 来隐藏您不需要的复选框，因为 HTML 仍会进入浏览器(只是不会显示)。然后，当用户选中该复选框时，您可以使用 javascript 将 CSS 样式更改为 display:initial 以便再次显示这些元素。