“图像隐藏于”复选框

Image hide on checkbox

本文关键字：复选框 图像隐藏于 图像 隐藏      更新时间：2023-09-26

在开始时复选框被选中，图像如下所示。如果未选中复选框，图像将隐藏，如果再次选中复选框，则图像将再次显示。

<form action=""> 
 <div> 
  <input type="checkbox" checked="checked" /> House <br /> 
  <input type="checkbox" checked="checked" /> Car <br /> 
  <input type="checkbox" checked="checked" /> Tree <br /> 
  </div> 
</form> 
<p> 
 <img src="house.jpg" alt="House" /> 
 <img src="car.jpg" alt="Car" /> 
 <img src="tree.jpg" alt="Tree" /> 
</p> <script type="text/javascript"> 
<!-- function selectImage(checkbox) { var counter = 0 for (var i = 0; i < checkbox.length; ++i) { if (checkbox[i].checked) ++stevec } return counter } 
//--> </script>

input[type="checkbox"] ~ img { display: none; }
input[type="checkbox"]:checked ~ img { display: inline; }

演示

相关文章：