Zaškrtávací políčko html: příklady krásných knoflíků na čistém CSS, vytvoření "harmoniky", získávání hodnot z formulářů pomocí PHP a jQuery

Po výběru příslušného textu se zobrazí text.

HTML:

 Пункт 1  
  Text 1. 

  Bod 2 
  Text 2. 

  Bod 3 
  Text 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;} 

Příjem a zpracování hodnot pomocí PHP

Zvažte zaškrtávací políčko html příklady použití ve formulářích, kde je také možné získat hodnoty (value = "my_value").

Hodnoty jsou zapsány do operátoru value = "".

  HTML 

  CSS 

  Javascript 

  jQuery 

  Php 

  Mysql 

  Ajax 

Po odeslání formuláře pole $ _POST bude obsahovat operátor name = "" v poli pole a hodnotu - value = "".

Pokud by to bylo pravidelné pole, vypadalo by to takto:

 $post = array(name => value); 

nebo

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

Převádíme pole $ _POST do řetězce pomocí funkce PHP implode () a přiřadíme hodnotu $ _POST ["ajax_name"] k proměnné $ ajax. Obvykle se pro všechny hodnoty $ _POST vytvářejí proměnné, ale napíšeme například pouze jednu, abychom nepřeplnili kód s nepotřebnými informacemi. Je také nutné zkontrolovat bezpečnost vstupních dat $ _POST, ale tady to neuděláme, bylo o tom psáno hodně v dalších článcích.

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" 
  "; 

Načítání klíčů a hodnot formulářů pomocí jQuery

Chcete-li získat hodnoty z formuláře bez opětovného načtení stránky, použijte skripty (javascript nebo 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( ", " ) + " 
 
 ");});}); 

Vytvořte pole:

 var val = []; 

Pak se do pole val () zapíše každá (každá) vybraná položka ("vstup: zaškrtnutá") pomocí push funkce:

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

Obsah pole array () se zobrazí na stránce, pro kterou přidáme html objekt

jQuery:

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

Můžete zjistit, zda je zaškrtávací políčko html vybráno pomocí .is (": checked") a .prop ("checked").

Získáme hodnoty (val) každého zaškrtávacího políčka a vyvedeme jej prostřednictvím výstrahy ():

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

Totéž udělejte identifikátor (id) pomocí .prop ("checked"):

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

Výstup klíčů a hodnot prostřednictvím výstrahy () je například pouze, nejsou k tomu, aby formulář fungoval, a proto je třeba je z kódu odstranit.

Pokud není zaškrtnuto žádné políčko, tlačítko odeslat formulář ("zakázáno"):

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

Věnujte pozornost dvojtečce: .is (": checked") funguje správně s dvojtečkou a .prop ("checked") funguje bez dvojtečky!

Přidejte možnost označit všechny položky najednou.

  Отметить все 

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

Všechen kód.

HTML:

  Požadované dovednosti: 
  Označte vše 

  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" 
  "; 

Pure CSS Button Design

Chcete-li uspořádat tlačítka v souladu s návrhem stránky, použijeme pouze CSS. Skryjte původní čtverec pomocí vlastností z-indexu a opacity, v tomto případě se čtverce nepohybují z obrazovky, ale jednoduše se stanou průhlednými (opacita: 0).

CSS:

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

Na stejném místě zobrazujeme tlačítka s vlastním designem.

Značka vstupu se může objevit před značkou štítku a pak použijte první příklad stylingových tlačítek:

 .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; }} 

Pokud je vstup uvnitř tagu štítku, pak je zaškrtávací políčko umístěno do divu s třídou "text". Styly jsou předávány ze vstupů: v druhém příkladu jsou zaškrtnuty do divu s třídou "text":

 .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:

  Požadované dovednosti: 
  
  Označte vše 
  
  HTML 
  
  CSS 
  
  Javascript 
  
  jQuery 
  
  Php 
  
  Mysql 
  
  Ajax 

V závislosti na situaci tedy můžete vždy zvolit vhodné místo pro zadání a označení. Pokud z nějakého důvodu není možnost, kdy je vstup umístěn před štítkem, vhodný, můžete umístit vstup do štítku štítku.

Můžete také stylizovat zaškrtávací políčko html pomocí skripty (javascript, jQuery), moderní prohlížeče dělají skvělou práci s nimi. Pokud však uživatel vstoupí na web ze starého prohlížeče, je třeba stále předávat CSS.

Je také nutné vzít v úvahu, že v různých operačních systémech budou styly zaškrtávacích polí vypadat jinak. Pokud se Google Chrome pokusí vyřešit tyto rozdíly, pak v jiných prohlížečích může být návrh tlačítek velmi odlišný.