Нека се запознаем с елемент 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>
Какво следва да очакваме при невдигнат флаг на 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
<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"
Публикуване на коментар