美工统筹SEO,为企业电子商务营销助力!
Html中利用自界说图片来完成checkbox显现的体例
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-20 08:51:18 阅读数: 251
若是须要利用图片来完成checkbox的利用,能够利用来完成,完成道理是将label表签取代checkbox的显现,将checkbox的display设置为none,在label标签中利用要显现的图片img,再利用js函数去节制图片的选中与否的切换。
JavaScript Code复制内容到剪贴板- <label for="agree" >
- <img class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">
- </label>
- <input type="checkbox" style="display:none" id="agree" checked="checked">
- <script>
- function checkclick(){
- var checkimg = document.getElementById("checkimg");
- if($("#agree").is(":checked") ){
- $("#agree").attr("checked","unchecked");
- checkimg.src="../img/unchecked.png";
- checkimg.alt="未选";
- } else{
- $("#agree").attr("checked","checked");
- checkimg.src="../img/checked.png";
- checkimg.alt="选中";
- }
- }
- </script>
以上便是小编为大师带来的Html中利用自界说图片来完成checkbox显现的体例全数内容了,但愿大师多多撑持网页设想~