Checkbox html: примери за красиви бутони на чист CSS, създаване на "акордеон", получаване на стойности от формуляри с помощта на PHP и jQuery

Когато изберете съответния текст, се появява текстът.

HTML:

 Пункт 1  
  Текст 1. 

  Точка 2 
  Текст 2. 

  Точка 3 
  Текст 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;} 

Получаване и обработка на стойности с помощта на PHP

Помислете за отметки в полето html примери за използване във формуляри, където също е възможно да получите стойности (value = "my_value").

Стойностите се записват в value = "" оператора.

  HTML 

  CSS 

  Javascript 

  JQuery 

  PHP 

  MySQL 

  Аякс 

Когато изпращате формуляр, масивът $ _POST ще съдържа оператора name = "" в ключа на масива, а стойността - value = "".

Ако е бил редовен масив, ще изглежда така:

 $post = array(name => value); 

или

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

Преобразуваме масива $ _POST в низ с помощта на функцията PHP implode () и присвояваме стойността $ _POST ["ajax_name"] на променливата $ ajax. Обикновено за всички $ _POST стойности се създават променливи, но например пишем само един, за да не претоварваме кода с ненужна информация. Също така е необходимо да се провери сигурността на входните данни $ _POST, но тук няма да направим това, за това е написано много в други статии.

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); ехо" 
  "; 

Извличане на ключове за формуляри и стойности с помощта на jQuery

За да получите стойностите от формуляра, без да презареждате страницата, използвайте скриптове (javascript или 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( ", " ) + " 
 
 ");});}); 

Създайте масив:

 var val = []; 

След това всеки (всеки) избран елемент ("input: checked") с помощта на push функцията се записва в val () масива:

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

Съдържанието на масива val () ще се покаже на страницата, за което ще добавим html обект

JQuery:

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

Можете да разберете дали е избрано квадратчето за отметка html с помощта на .is (": checked") и .prop ("отметен").

Ще получим стойностите (val) на всяка отметка и ще я изведем чрез сигнал ():

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

Направете същото, за да получите идентификатора (id) с помощта на .prop ("отметнато"):

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

Извеждането на ключове и стойности чрез alert () е само само, те не са необходими за работата на формуляра, така че те трябва да бъдат премахнати от кода.

Ако бутонът за изпращане на формуляри не е налице („деактивиран“), ако не е поставен отметка

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

Обърнете внимание на двоеточие: .is (": checked") работи правилно с двоеточие, а .prop ("проверено") работи без двоеточие !!!

Добавете възможността да маркирате всички елементи едновременно.

  Отметить все 

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

Цял код.

HTML:

  Необходими умения: 
  Маркирайте всичко 

  HTML 

  CSS 

  Javascript 

  JQuery 

  PHP 

  MySQL 

  Аякс 

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); ехо" 
  "; 

Чист дизайн на CSS бутони

За да подредим бутоните в съответствие с дизайна на сайта, ще използваме само CSS. Скриване на оригиналния квадрат, като се използват свойствата на z-index и opacity, в този случай квадратите не се движат от екрана, а просто стават прозрачни (непрозрачност: 0).

CSS:

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

На същото място показваме бутони със собствен дизайн.

Маркерът за въвеждане може да се появи преди етикета на етикета, след което да използвате първия пример на бутони за оформяне:

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

Ако входът е вътре в етикет с етикет, текстът на квадратчето за отметка се поставя в div с класа "text". Стиловете се подават от входа: проверяват се към div с класа "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:

  Необходими умения: 
  
  Маркирайте всичко 
  
  HTML 
  
  CSS 
  
  Javascript 
  
  JQuery 
  
  PHP 
  
  MySQL 
  
  Аякс 

По този начин, в зависимост от ситуацията, винаги можете да изберете подходящото място за въвеждане и етикет. Ако по някаква причина опцията, когато входът е разположен пред етикета, не е подходящ, можете да позиционирате входа вътре в етикета на етикета.

Можете също да стилизирате отметката в полето html с помощта на скриптове (javascript, jQuery), модерните браузъри вършат страхотна работа с тях. Но ако потребителят влезе в сайта от стар браузър, тогава предпочитанието е да се даде CSS.

Също така е необходимо да се вземе под внимание, че в различните операционни системи стиловете за отметки ще изглеждат различно. Ако Google Chrome се опита да изглади тези различия, в други браузъри дизайнът на бутоните може да бъде много различен.