我有两个复选框,当我单击它们时,我想显示另外三个复选框。我通过在HTML中隐藏div,然后在单击时使用css显示div(附加了代码)来完成此操作。
[由于某种原因,每当我单击第一个复选框(snapshot_checkbox
)时,都会同时打开第二个复选框和第二个复选框的子选项复选框(第二个复选框为tmd_checkbox
。如何防止这种情况发生?希望他们都只打开各自的子选项,而不是彼此都打开。我希望这是有道理的。
ul input:checked~#snapshot_suboptions {
display: inline;
}
ul input:checked~#tmd_suboptions {
display: inline;
}
<div class="selectproduct">
<h1>3. Select Product</h1>
<ul>
<li>
<input type="checkbox" class="product" name="snapshot" value="0.09" id="snapshot_checkbox" onclick="SnapshotFunction()">Snapshot (Targetoo)<br>
<div id="snapshot_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="banner" value="0.08" id="snapshot_banner_checkbox">Banner<br></li>
<li><input type="checkbox" name="video" value="0.08" id="snapshot_video_checkbox">Video<br></li>
<li><input type="checkbox" name="richmedia" value="0.08" id="snapshot_richmedia_checkbox">Rich Media<br></li>
</ul>
</div>
<input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox"> Targeted Mobile Display<br>
<div id="tmd_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="banner" value="0.08" id="tmd_banner_checkbox">Banner<br></li>
<li><input type="checkbox" name="video" value="0.08" id="tmd_video_checkbox">Video<br></li>
<li><input type="checkbox" name="richmedia" value="0.08" id="tmd_richmedia_checkbox">Rich Media<br></li>
<br>
</ul>
</div>
<input type="checkbox" class="product" name="push" id="push_checkbox" value="0.07">Push (ZeroPark)<br>
<input type="checkbox" class="product" name="behaviouralpush" id="behaviouralpush_checkbox" value="0.07">Behavioural Push (Airpush)<br>
<input type="checkbox" class="product" name="mobileoverlay" id="mobileoverlay_checkbox" value="0.06">Mobile Overlay<br>
<input type="checkbox" class="product" name="landingpage" value="0.08">Landing Page<br>
<input type="checkbox" class="product" name="video" value="0.07" id="video_checkbox">Video<br>
<p id="video_text" style="display:none">Video will be sold on a CPCV (Cost per Completed View) basis, NOT CPC. This is the industry standard for video advertising.</p>
</li>
</ul>
</div>
您可能要选择输入的ID:
#snapshot_checkbox:checked~#snapshot_suboptions {
display: inline;
}
#tmd_checkbox:checked~#tmd_suboptions {
display: inline;
}