Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...



Нека се запознаем с елемент checkbox. Той се явява флаг и с негова помощ потребителят може да избере определено положение, като постави "лястовичка" (V). Checkbox се специализира в пределите на формата за прости булеви атрибути (истина или лъжа) или за атрибути, които могат да приемат множество значения. Всяко запълнено поле генерира отделна двойка име/значение. Елементът няма затварящ таг. Незадължителен атрибут (псевдоелемент) checked служи за инициализация/активизация на полето по подразбиране.
Според HTML синтаксиса му е
<input type="checkbox" name="somename" value="1" checked>

Според XHTML синтаксиса му е
<input атрибути />

На www.w3.org по въпроса се чете следното:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful.

Как да проверим checkbox на PHP


Съгласно тенденцията за преход към HTML5 синтаксисът на checkbox би следвало да бъде такъв
<input type="checkbox" name="checkbox" checked="checked" />

Липсва атрибут value. Той не е задължителен, но от друга страна интерес представлява какво изпраща checkbox на сценария при събмит на формата. Изпраща отговора On, както пишат www.w3.org. За целта стартираме следния код и гледаме резултата.
<?php
 echo $_POST['checkbox'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post">
 <p><label><input type="checkbox" name="checkbox" /> HTML</label></p>
 <p><input type="submit" value="Отговор" /></p>
</form>
</body>
</html>

on

Какво следва да очакваме при невдигнат флаг на checkbox? Резултатът е NULL. За целта стартираме следния код и се наслаждаваме.
<?php 
 $checkbox = $_POST['checkbox'];
 if(isset($checkbox) && $checkbox==="on")
 {
  echo 'checkbox checked<br />';
  var_dump($checkbox);
 }
 else
 {
  echo 'checkbox not checked<br />';
  var_dump($checkbox);
 }
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" /> HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Как да проверим checkbox на PHP - вариант 2


Помните ли героите от Матрицата? Те по цял ден гледаха нули и единици. Съгласете се, че е тъпо да гледат по цял ден on или NULL. Тогава да матрицираме кода и да гледаме като хората нули и единици.Пред таг <input type="checkbox"> разполагаме скрито поле <input type="hidden"> с също значение на параметър «name» или както се досещате бъзикаме се с value.

<form …>
…
<input type="hidden" name="checkbox" value="0">
<input type="checkbox" name="checkbox" value="1">
…
</form>

По този начин, ако флага е вдигнат checkbox ще предаде на променлива $checkbox стойност 1, в противен случай скритото поле изпраща 0.
ACHTUNG! Ако формата е с 10 checkbox, то кода ще набъбне като гъба след дъжд, което тоже не е гуд.

Как да проверим checkbox на PHP - вариант 3


Нека се придържаме към изискванията на консорциума W3C и напишем правилно полето в формата.
<form method="post">
  <p><label><input type="checkbox" name="checkbox" checked="checked" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>

Като цяло кодът става такъв:
<?php
function checkbox($_var)
 {
  $res=0; //инициализация
  if (isset($_POST[$_var]))
  { 
   if ($_POST[$_var]==='on') 
   { 
    $res=1; 
   } 
   else
   { 
    $res=0; 
   }
  }
  return $res;
 }

echo checkbox('checkbox');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" checked="checked" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Как Profruit проверява checkbox на PHP - вариант 4


HTML5 все още не е утвърден, а Profruit недолюбва потребителските функции. Главна роля играе функция (int), а още intval(). Тези функции служат за несъмнено преобразуване на значенията в цяло число. При вдигнат флаг сценарият получава 1, а (int) запазва резултата. При неактивен checkbox сценарият получава NULL (помним казаното горе). NULL прекарано през (int) става 0 и налице работещ тригер.

Кодът е този:
<?php
 $checkbox = (int)$_POST['checkbox'];
 if($checkbox==1)
 {
  echo 'checkbox = 1';
  //to do
 }
 else
 {
  echo 'checkbox = 0';
 }
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" value="1" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Стилизация на checkbox


Елементи на формата се поддават на частична стилизация чрез CSS и тази идея трябва да се оценява като експериментална. По мое мнение това е подобие на минно поле, дори смело бих казал, че това не трябва да се прави, защото не опира до дизайн, а до потребителска нагласа. Видът на елементите съответстват на вида им от операционната система на потребителя. Позволява им бърза ориентация.

И все пак ако ви сърби, заигравка с height, width и padding дава непредсказуеми резултати в различните браузъри.

Интересни техники на стилизация на checkbox:
webdesign.maratz.com
demo.tutorialzine.com
www.filamentgroup.com
examples.wufoo.com
advancestyles.info

В общи линии посочените горе адреси ползват следния трик. Елемент checkbox се прави невидим не чрез присвояване на display:none, а се прибягва до свойство opacity:0. По този начин елементът остава на страницата, остава кликабелен, но напълно прозрачен, а на блока, където се намира checkbox се задава заден фон (background) с картинка. Картинката задава изглед на checkbox. При вдигнат флаг се сменя стила на блока, а това променя фона, съответно индикира изменението на checkbox. Елегантно е картинката да бъде спрайт, за да се избегне премигването при промяна състоянието (подмяната на една картинка с друга по време на зареждането й).

Реализацията на идеята.
/*---------- CSS -----------*/
input {
  margin:0;
  padding:0;
  opacity:0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
  background:url(checkbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
  background:url(checkbox_off.png) no-repeat 0 3px;
}

/*---------- JavaScript-----------*/

function checkboxCheck () {
  if (document.getElementById("mycheckbox").checked) {
 document.getElementById("checkboxDiv").className="checkboxOn";
   }
 else {
  document.getElementById("checkboxDiv").className="checkboxOff";
 }
}

/*---------- HTML-----------*/

<div id="checkboxDiv" class="checkboxOn">
 <p><input type="checkbox" id="mycheckbox" onclick="checkboxCheck();" class="checkboxOn" checked="checked"/> Запомни me</p>
</div>

Демо
запомни ме

Checkbox и JS


Учебниците по HTML описват таг INPUT с параметър type="checkbox" като "множествен избор на данните". И веднага проблем. Същите тези данни с еднакво име не се обединяват, а презаписват от последното влезнало значение. Помним вариант 2 - Как да проверим checkbox на PHP.

За да избегнем хемороидите предаваме имената от формата на сценария като списък, а PHP а свой ред ще сложи ключове. По този начин получаваме масив $_POST['numbers'] = array()

<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />

Реверанс към потребителя на вашата страница е, ако има бутон за избор на всички checkbox-ве наведнъж. Това се постига от интерпретатора на javascript, вграден в всеки браузър.

Избор на всички чрез JavaScript

Какво ви интересува на profruit.blogspot.com?

WEB

Linux

Споделено

избери всичко

<script type="text/javascript">
function setChecked(obj)
   {
   var str = document.getElementById("text").innerHTML;
   str = (str == "избери" ? "отмени" : "избери");
   document.getElementById("text").innerHTML = str;
   
   var check = document.getElementsByName("id[]");
   for (var i=0; i<check.length; i++)
      {
      check[i].checked = obj.checked;
      }
   }
</script>

<form method="post">
   <fieldset><legend>Какво ви интересува на profruit.blogspot.com?</legend>
   <p><input type="checkbox" name="id[]" value="1" /> WEB</p>
   <p><input type="checkbox" name="id[]" value="2" /> Linux</p>
   <p><input type="checkbox" name="id[]" value="3" /> Споделено</p>
   <p>
      <input type="checkbox" name="set" onclick="setChecked(this)" />
      <span id="text">избери</span> всичко
   </p></fieldset>
</form>
Какъв програмен език владеете?

<script type="text/javascript">
    checked = false;
    function checkedAll () {
    if (checked == false){checked = true}else{checked = false}
    for (var i = 0; i < document.getElementById("proform").elements.length; i++) {
    document.getElementById("proform").elements[i].checked = checked;
    }
        }
</script>
    
<h3>Избор на всички чрез JavaScript</h3>
<form id="proform">
 <fieldset><legend>Какъв програмен език владеете?</legend>
    <p><label><input type="checkbox" name="html" value="1"> HTML</label></p>
    <p><label><input type="checkbox" name="css" value="2"> CSS</label></p>
    <p><label><input type="checkbox" name="php" value="3"> PHP</label></p>
    <p><label><input type="checkbox" name="sql" value="4"> SQL</label></p>
    <p><label><input type='checkbox' onclick='checkedAll();'> избери всички</label></p>
    <p><input type="submit" value="Отговор"></p>
 </fieldset>
</form>

Избор на всички чрез jQuery

Какъв програмен език владеете?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
     $("#checkall").click( function() {
    if($("#checkall").attr("checked")){
     $(".procheck").attr("checked", true);
    } else {
     $(".procheck").attr("checked", false);
    }
     });
  });
</script>
 
<h3>Избор на всички чрез jQuery</h3>
<form>
 <fieldset><legend>Какъв програмен език владеете?</legend>
  <p><label><input type="checkbox" name="html" value="1" class="procheck"> HTML</label></p>
  <p><label><input type="checkbox" name="css" value="2" class="procheck"> CSS</label></p>
  <p><label><input type="checkbox" name="php" value="3" class="procheck"> PHP</label></p>
  <p><label><input type="checkbox" name="sql" value="4" class="procheck"> SQL</label></p>
  <p><label><input type="checkbox" id="checkall"/> избери всички</label></p>
  <p><input type="submit" value="Отговор"></p>
 </fieldset>
</form>



до нови срещи   ^.^

21.01.2012 profruit 

|

0 Response to "Елемент Checkbox"

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога