jQuery implémente des cases à cocher et des radios personnalisées styles_jquery

1, parce que

Récemment, j'ai dû mettre en œuvre un style radio personnalisé au travail, et nous utilisons généralement le style par défaut. Parce que je n'arrive vraiment pas à trouver de solution, j'ai commencé à chercher et finalement j'ai vu une bonne solution, qui peut parfaitement. résoudre notre problème rencontré.

2, Principe

Tout le monde sait que lors de l'écriture d'une structure, une radio ou une case à cocher sera utilisée avec l'étiquette. Lorsque la valeur de l'attribut for de l'étiquette est la même que la valeur de l'identifiant de l'entrée, cliquez sur l'étiquette pour sélectionner l'entrée ici. , l'étiquette est utilisée pour l'écraser. Notre style d'entrée par défaut consiste à ajouter une image d'arrière-plan (case à cocher ou radio embellie) à l'étiquette, c'est-à-dire que pendant le processus de clic, nous ne pouvons pas voir l'entrée par défaut (définir z-index : - 1 pour l'entrée), et cliquez sur l'étiquette, et chargez différentes images de fond à travers différents événements (voici la position de changement de l'image de fond)

3. Définissez le style par défaut pour embellir la case à cocher ou la radio

(1) Structure des pages

<form class="form" method="post">
  <fieldset>
    <legend>Which genres do you like&#63;</legend>
    <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
    <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
    <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
    <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
    <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
    <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
  </fieldset> 
  <fieldset>
    <legend>Caddyshack is the greatest movie of all time, right&#63;</legend>
    <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
    <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
    <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack&#63;</label>
  </fieldset>
</form>

(2) code jquery (la bibliothèque jquery doit être introduite)

jQuery.fn.customInput = function(){
  $(this).each(function(i){
    if($(this).is('[type=checkbox],[type=radio]')){
      var input = $(this);
      //get the associated label using the input's id
      var label = $('label[for='+input.attr('id')+']');
      //get type,for classname suffix
      var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
      //wrap the input + label in a div
      $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
      //find all inputs in this set using the shared name attribute
      var allInputs = $('input[name='+input.attr('name')+']');
      //necessary for browsers that don't support the :hover pseudo class on labels
      label.hover(function(){
        $(this).addClass('hover');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedHover');
        }
      },function(){
        $(this).removeClass('hover checkedHover');
      });
       
      //bind custom event, trigger it, bind click,focus,blur events
      input.bind('updateState',function(){
        if(input.is(':checked')){
          if(input.is(':radio')){
            allInputs.each(function(){
              $('label[for='+$(this).attr('id')+']').removeClass('checked');
            });
          };
          label.addClass('checked');
        } else {
          label.removeClass('checked checkedHover checkedFocus');
        }
      })
      .trigger('updateState')
      .click(function(){
        $(this).trigger('updateState');
      })
      .focus(function(){
        label.addClass('focus');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedFocus');
        }
      })
      .blur(function(){
        label.removeClass('focus checkedFocus');
      });        
    }
  });
}

Après avoir présenté la bibliothèque jquery et le code ci-dessus, vous pouvez exécuter le code suivant

$('input').customInput();

(3) Le div externe généré

Si la structure de votre code est telle que l'étiquette et l'entrée sont écrites par paires, alors un div sera généré en dehors d'eux, comme le montre la figure

(4) Définir un style par défaut personnalisé

Préparez une photo, comme suit :

Vous pouvez vous demander pourquoi le haut n'est pas en haut, mais à une certaine distance, car la plupart de nos options de saisie sont centrées et nous utilisons l'image d'arrière-plan de l'étiquette pour la simuler, nous essayons donc de faire en sorte que le options de saisie Affichage centré. En bref : les petites icônes ico doivent être disposées verticalement, et il faut laisser une certaine distance pour obtenir un affichage centré.

/* wrapper divs */
      .custom-checkbox,
      .custom-radio {
        position: relative;
        display: inline-block;
      }
      /* input, label positioning */
      .custom-checkbox input,
      .custom-radio input {
        position: absolute;
        left: 2px;
        top: 3px;
        margin: 0;
        z-index: -1;
      }
      .custom-checkbox label,
      .custom-radio label {
        display: block;
        position: relative;
        z-index: 1;
        font-size: 1.3em;
        padding-right: 1em;
        line-height: 1;
        padding: .5em 0 .5em 30px;
        margin: 0 0 .3em;
        cursor: pointer;
      }

Ce sont les paramètres les plus extérieurs, vous pouvez bien entendu les modifier vous-même

/* ==默认状态效果== */
      .custom-checkbox label { 
        background: url(images/checkbox.gif) no-repeat; 
      }
      .custom-radio label { 
        background: url(images/button-radio.png) no-repeat; 
      }
      .custom-checkbox label, 
      .custom-radio label {
        background-position: 0px 0px;
      }

/*==鼠标悬停和得到焦点状态==*/
      .custom-checkbox label.hover,
      .custom-checkbox label.focus,
      .custom-radio label.hover,
      .custom-radio label.focus {
        /*background-position: -10px -114px;*/
      }
      
      /*==选中状态==*/
      .custom-checkbox label.checked,
      .custom-radio label.checked {
        background-position: 0px -47px;
      }
      .custom-checkbox label.checkedHover,
      .custom-checkbox label.checkedFocus {
        /*background-position: -10px -314px;*/
      }
      .custom-checkbox label.focus,
      .custom-radio label.focus {
        outline: 1px dotted #ccc;
      }

Fin : Bref, j'ai parfaitement résolu mon problème, et je vous envoie une capture d'écran pour voir

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.