jQuery melaksanakan kotak semak tersuai dan radio styles_jquery

1, sebab

Baru-baru ini, saya perlu melaksanakan gaya radio tersuai di tempat kerja, dan kami biasanya menggunakan gaya lalai Kerana saya benar-benar tidak dapat memikirkan penyelesaian, saya mula mencari, dan akhirnya saya melihat penyelesaian yang baik, yang boleh dengan sempurna. menyelesaikan masalah yang kita hadapi.

2, Prinsip

Semua orang tahu bahawa semasa menulis struktur, radio atau kotak semak akan digunakan bersama-sama dengan label Apabila nilai atribut untuk label adalah sama dengan nilai id input, klik label untuk memilih input Di sini , label digunakan untuk menulis ganti gaya lalai input kami adalah dengan menambahkan imej latar belakang (kotak semak atau radio yang dicantikkan) pada label, iaitu semasa proses klik, kami tidak dapat melihat input lalai (set z-index:- 1 untuk input), dan Klik pada label, dan muatkan imej latar belakang yang berbeza melalui acara yang berbeza (di sini ialah kedudukan menukar imej latar belakang)

3. Tetapkan gaya lalai untuk mencantikkan kotak pilihan atau radio

(1) Struktur halaman

<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) kod jquery (perpustakaan jquery mesti diperkenalkan)

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');
      });        
    }
  });
}

Selepas memperkenalkan perpustakaan jquery dan kod di atas, anda boleh melaksanakan kod berikut

$('input').customInput();

(3) Div luar yang dijana

Jika struktur kod anda ialah label dan input ditulis secara berpasangan, maka div akan dijana di luarnya, seperti yang ditunjukkan dalam rajah

(4) Tetapkan gaya lalai tersuai

Sediakan gambar, seperti berikut:

Anda mungkin bertanya mengapa bahagian atas tidak berada di bahagian atas, tetapi pada jarak tertentu, kerana kebanyakan pilihan input kami dipusatkan, dan kami menggunakan imej latar belakang label untuk mensimulasikannya, jadi kami cuba membuat pilihan input Paparan berpusat. Ringkasnya: ikon kecil ico mesti disusun secara menegak, dan jarak tertentu mesti ditinggalkan untuk mencapai paparan berpusat.

/* 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;
      }

Ini adalah tetapan paling luar, sudah tentu anda boleh mengubah suainya sendiri

/* ==默认状态效果== */
      .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;
      }

Tamat: Ringkasnya, saya menyelesaikan masalah saya dengan sempurna, dan saya akan menghantar tangkapan skrin kepada anda untuk melihat

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.