JS implémente la case à cocher dans le formulaire pour augmenter les compétences effect_javascript d'affichage des bordures-js tutoriel-php.cn

JS implémente la case à cocher dans le formulaire pour augmenter les compétences effect_javascript d'affichage des bordures

WBOY

Libérer： 2016-05-16 15:43:45

original

1912 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation JS consistant à ajouter un effet d'affichage de bordure à la case à cocher du formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, JavaScript est utilisé pour réaliser l'effet de sélection de case à cocher, l'effet de case à cocher dans le formulaire, la simulation de l'effet de coche et l'effet d'embellissement obtenu en combinant JS et HTML5. Cela semble être un effet populaire en ce moment !

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-table-checkbox-check-border-show-codes/

Le code spécifique est le suivant :

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" />
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, 
legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }
input, button, select, textarea { outline:none }
li { list-style:none }
img { vertical-align:top; border:none }
textarea { resize:none }
body { width:auto; height:auto; padding:0; margin:0; color: #666; background: #FFF; }
body, input, textarea { font-size:12px; font-family:Arial, Verdana, "Microsoft Yahei", Simsun }
a{cursor:pointer}
a:link{color:#37a;text-decoration:none}
a:visited{color:#669;text-decoration:none}
a:hover{color:#fff;text-decoration:none;background:#37a}
a:active{color:#fff;text-decoration:none;background:#f93}
.clear { clear:both }
.clearfix:after{ content:"."; display:block; font-size: 0; height:0; clear:both; visibility:hidden }
.clearfix{ zoom:1}
#radio_wrap{width: 916px; margin: 50px auto 0;font-size: 0;*word-spacing:-1px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
#radio_wrap{letter-spacing:-4px;}}
#radio_wrap input{display: none;}
#radio_wrap li{position:relative; width: 223px; height: 259px; border: 1px solid #CCC; display:inline-block; *display:inline; *zoom:1; margin:0 2px;}
#radio_wrap li.checked{border:2px solid red;margin:-1px 1px;}
#radio_wrap li.checked i{width:30px; height:30px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(images/checked.gif) no-repeat;}
</style>
</head>
<body>
<div id="radio_wrap">
 <ul>
 <li class="c checked">
  <input type="radio" id="radio_a_01" name="radio_a" />
  <label for="radio_a_01"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 <li class="c">
  <input type="radio" id="radio_a_02" name="radio_a" />
  <label for="radio_a_02"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 </ul>
</div>
<script type="text/javascript">
(function() {
 var radioWrap = document.getElementById("radio_wrap"),
 li = radioWrap.getElementsByTagName("li");
 for(var i = 0; i < li.length; i++){
 li[i].onclick = function() {
  for(var i = 0; i < li.length; i++){
  li[i].className = "";
  }
  this.className = "checked";
 }
 }
})();
</script>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

JS implémente la case à cocher dans le formulaire pour augmenter les compétences effect_javascript d'affichage des bordures