Checkbox html: primjeri lijepih gumba na čistom CSS-u, stvaranje "harmonika", dobivanje vrijednosti iz obrazaca pomoću PHP-a i jQuery

Kada odaberete odgovarajući tekst, pojavljuje se tekst.

HTML:

 Пункт 1  
  Tekst 1. 

  Točka 2 
  Tekst 2. 

  Točka 3 
  Tekst 3. 

CSS:

 label[for^="accordion"]{font-size: 20px;}label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;}label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;}input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;margin: 10px;}input[id^="accordion"]{position: absolute;left: -9999px;}[id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Primanje i obrada vrijednosti pomoću PHP-a

Razmotrite za checkbox html primjere uporabe u obrascima, gdje je također moguće dobiti vrijednosti (value = "my_value").

Vrijednosti se upisuju u value = "" operator.

  HTML 

  CSS 

  Javascript 

  jQuery 

  PHP 

  MySQL 

  Ajax 

Kada je obrazac poslan, matrica $ _POST sadržavat će operator = "" u ključu polja i vrijednost - vrijednost = "".

Ako je riječ o regularnom nizu, izgledat će ovako:

 $post = array(name => value); 

ili

 $post = array("HTML_name" => "HTML","CSS_name" => "CSS","javascript_name" => "Javascript","jQuery_name" => "jQuery","PHP_name" => "PHP","ajax_name" => "Ajax",); 

Pretvorimo $ _POST polje u string koristeći funkciju PHP implode () i dodijelimo vrijednost $ _POST ["ajax_name"] varijabli $ ajax. Obično se za sve $ _POST vrijednosti kreiraju varijable, ali naprimjer, napišemo samo jednu kako ne bismo preopteretili kod nepotrebnim informacijama. Također je potrebno provjeriti sigurnost ulaznih podataka $ _POST, ali ovdje to nećemo učiniti, o tome smo već pisali u drugim člancima.

PHP:

 echo " 
 
 Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " {$ajax = $_POST["ajax"];} echo " 
 
 Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " 
  "; var_dump ($ _ POST); echo" 
  „; 

Preuzimanje ključeva i vrijednosti obrazaca pomoću jQuery

Da biste dobili vrijednosti iz obrasca bez ponovnog učitavanja stranice, upotrijebite skripte (javascript ili jQuery):

 $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 ");});}); {$("input.my-class").on("click", function(e) {var val = [];$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 ");});}); 

Izradite niz:

 var val = []; 

Tada se svaka (svaka) odabrana stavka ("input: checked") uz pomoć push funkcije upisuje u val () polje:

 $("input:checked").each( function(){val.push( $(this).val() );}); 

Sadržaj niza val () bit će prikazan na stranici, za što ćemo dodati html objekt

jQuery:

 $("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 "); 

Možete saznati je li potvrdni okvir html odabran pomoću .is (": označeno") i .prop ("označeno").

Dobit ćemo vrijednosti (val) svake označene kutije i ispisati ih putem upozorenja ():

 if ( $(this).is(':checked') ) alert($(this).val()); 

Učinite isto da biste dobili identifikator (id) pomoću .prop ("označeno"):

 if ( $(this).prop('checked') ) alert($(this).attr("id")); 

Izlaz ključeva i vrijednosti putem alert () samo je primjerice, oni nisu potrebni za rad obrasca, pa ih treba ukloniti iz koda.

Neka je gumb za slanje obrasca nedostupan ("onemogućen") ako nije odabran potvrdni okvir:

 $('#submitButton').prop("disabled", !$(this).prop("checked")); 

Obratite pozornost na dvotočku: .is (": checked") ispravno radi s dvotočkom, a .prop ("označeno") radi bez dvotočke !!!

Dodajte mogućnost označavanja svih stavki odjednom.

  Отметить все 

 if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked); 

Svi kodovi.

HTML:

  Potrebne vještine: 
  Označi sve 

  HTML 

  CSS 

  Javascript 

  jQuery 

  PHP 

  MySQL 

  Ajax 

jQuery:

 $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("input.my-class").on("click", function(e) {var val = [];if ( $(this).is(':checked') ) alert($(this).val());if ( $(this).prop('checked') ) alert($(this).attr("id"));$('#submitButton').prop("disabled", !$(this).prop("checked"));if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked);$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: ALL

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: " + val.join( ", " ) + "

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); 

PHP:

 if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 
 
 Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " {$ajax = $_POST["ajax"];} if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 
 
 Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " 
  "; var_dump ($ _ POST); echo" 
  „; 

Čisti CSS dizajn gumba

Za uređivanje gumba u skladu s dizajnom stranice, koristit ćemo samo CSS. Sakrijte izvorni kvadrat pomoću svojstava z-indeksa i neprozirnosti, u ovom slučaju kvadrati se ne pomiču s ekrana, već jednostavno postaju prozirni (neprozirnost: 0).

CSS:

  position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px; 

Na istom mjestu prikazujemo gumbe s vlastitim dizajnom.

Oznaka ulaza može se pojaviti ispred oznake oznake, a zatim upotrijebiti prvi primjer gumba za oblikovanje:

 .my-class {position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.my-class + label {position: relative;padding: 0 0 0 60px;cursor: pointer;}.my-class + label:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: 1.2s;}.my-class + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.my-class:checked + label:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.my-class:checked + label:after {left: 26px;}.my-class:focus + label:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

Ako je unos unutar oznake oznake, tekst potvrdnog okvira stavlja se u div s klasom "tekst". Stilovi se prenose s ulaza: označeni u divu s klasom "tekst" u drugom primjeru:

 .label input{position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.text {position: relative;padding: 0 0 0 60px;cursor: pointer;}.text:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: .2s;}.text:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.label input:checked + .text:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.label input:checked + .text:after {left: 26px;}.label input:focus + .text:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

HTML:

  Potrebne vještine: 
  
  Označi sve 
  
  HTML 
  
  CSS 
  
  Javascript 
  
  jQuery 
  
  PHP 
  
  MySQL 
  
  Ajax 

Stoga, ovisno o situaciji, uvijek možete odabrati odgovarajuće mjesto za unos i oznaku. Ako iz nekog razloga opcija nije prikladna, ako je ulaz smješten ispred naljepnice, možete postaviti ulaz unutar oznake naljepnice.

Također možete stilizirati potvrdni okvir html pomoću skripte (javascript, jQuery), moderni preglednici izvrsno rade s njima. Ali ako korisnik uđe na web-lokaciju iz starog preglednika, prednost je ipak dati CSS-u.

Također je potrebno uzeti u obzir da će različiti operacijski sustavi izgledati drugačije. Ako Google Chrome pokuša ugladiti te razlike, u drugim preglednicima dizajn gumba može biti vrlo različit.