Checkbox html: esempi di bellissimi pulsanti su puro CSS, creando una "fisarmonica", ottenendo valori dai moduli usando PHP e jQuery

Quando si seleziona il testo della voce appropriata appare.

HTML:

 Пункт 1  
  Testo 1. 

  Punto 2 
  Testo 2. 

  Punto 3 
  Testo 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;} 

Ricevere ed elaborare valori usando PHP

Considerare gli esempi di utilizzo di checkbox html nei moduli, dove è anche possibile ottenere valori (value = "my_value").

I valori sono scritti sull'operatore value = "".

  HTML 

  CSS 

  Javascript 

  jQuery 

  PHP 

  MySQL 

  Ajax 

Quando si invia un modulo, l'array $ _POST conterrà l'operatore name = "" nella chiave dell'array e il valore - value = "".

Se fosse un array normale, sarebbe simile a questo:

 $post = array(name => value); 

o

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

Convertiamo l'array $ _POST in una stringa usando la funzione implode () di PHP e assegniamo il valore $ _POST ["ajax_name"] alla variabile $ ajax. Di solito, per tutti i valori $ _POST, vengono create variabili, ma ad esempio ne scriverne solo una per non sovraccaricare il codice con informazioni non necessarie. È anche necessario controllare la sicurezza dei dati di input $ _POST, ma qui non lo faremo, molto è stato scritto su questo in altri articoli.

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

Recupero di chiavi e valori del modulo utilizzando jQuery

Per ottenere i valori dal modulo senza ricaricare la pagina, utilizzare gli script (javascript o 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( ", " ) + " 
 
 ");});}); 

Crea un array:

 var val = []; 

Quindi ogni elemento (ciascuno) selezionato ("input: checked") con l'aiuto della funzione push viene scritto nell'array val ():

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

Il contenuto dell'array val () verrà visualizzato nella pagina, per il quale aggiungeremo un oggetto html

jQuery:

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

Puoi scoprire se la casella di controllo html è stata selezionata usando .is (": checked") e .prop ("checked").

Otterremo i valori (val) di ogni casella selezionata e li emetteremo tramite alert ():

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

Fai lo stesso per ottenere l'identificatore (id) usando .prop ("checked"):

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

L'output di chiavi e valori tramite alert () è solo per esempio, non sono necessari perché il modulo funzioni, quindi dovrebbero essere rimossi dal codice.

Rendi il pulsante di invio del modulo non disponibile ("disabilitato") se non è stata selezionata alcuna casella di controllo:

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

Presta attenzione ai due punti: .is (": checked") funziona correttamente con due punti e .prop ("checked") funziona senza due punti !!!

Aggiungi la possibilità di contrassegnare tutti gli elementi contemporaneamente.

  Отметить все 

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

Tutto il codice

HTML:

  Abilità richieste: 
  Segna tutti 

  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 Button Design CSS

Per organizzare i pulsanti in base al design del sito, utilizzeremo solo CSS. Nascondi il quadrato originale usando le proprietà di z-index e opacity, in questo caso i quadrati non si spostano dallo schermo, ma diventano semplicemente trasparenti (opacità: 0).

CSS:

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

Nello stesso luogo mostriamo i pulsanti con il nostro design.

Il tag di input può apparire prima del tag label, quindi utilizzare il primo esempio di pulsanti di stile:

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

Se l'input è all'interno di un tag etichetta, il testo della casella di controllo viene inserito in un div con la classe "testo". Gli stili vengono passati dall'input: selezionato in un div con la classe "text" nel secondo esempio:

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

  Abilità richieste: 
  
  Segna tutti 
  
  HTML 
  
  CSS 
  
  Javascript 
  
  jQuery 
  
  PHP 
  
  MySQL 
  
  Ajax 

Pertanto, a seconda della situazione, puoi sempre scegliere la posizione appropriata per l'input e l'etichetta. Se per qualche motivo l'opzione quando l'ingresso si trova davanti all'etichetta non è adatta, è possibile posizionare l'input all'interno del tag etichetta.

Puoi anche stilizzare la casella di controllo html usando script (javascript, jQuery), i browser moderni fanno un ottimo lavoro con loro. Ma se l'utente accede al sito da un vecchio browser, la preferenza è comunque quella di fornire CSS.

È anche necessario tener conto che su diversi sistemi operativi, gli stili di casella di controllo avranno un aspetto diverso. Se Google Chrome cerca di appianare queste differenze, allora su altri browser il design dei pulsanti può essere molto diverso.