Checkboxes

Jelölő négyzetek használata jó lehetőség lehet mikor azt akarod hogy látogatóidnak adj opciót amiből számos elemből választhatnak egy csoport lehetőségből. Ezt figyelembe véve, a jelelő négyzet ellenkező képen a dolgozik rádió gombokkal szemben, ami csak egy elem kijelölését engedi meg egy csoportnyi választható lehetőségekből. A legegyszerűbb űrlap formájában, a jelelő négyzet egy egyszerű input elem egy type tulajdonsággal beállítva a checkbox -ra pontosan így:

<input type="checkbox">

Bár minden bemeneti elemmel, szükséged van a name definálásra hogy használható legyen - név nélkül, az elem nem lesz azonosítható mikor az űrlapot visszaküldi a szervernek feldolgozásra. Emellett meg kell hogy adjad neki value értékét - ez az érték visszaküldi a szervernek hogy ha a jelelő négyzetet bejelöli. Itt egy példa rá:

<input type="checkbox" name="nameOfChoice" value="1">

Ennél a példánál, ha a jelelő négyzet be van jelölve és az űrlap el van küldve a szervernek, a szerver el fogja tudni olvasni a "nameOfChoice" nevű űrlap elemet és az értéke 1 lesz.

Bejelölt vagy nem bejelölt ?

Látható hogy az összes jelelő négyzet eddig még nincsenek bejelölve az kezdettől - a felhasználó interakciót kell neki csinálnia a jelelő négyzettel hogy megváltoztassa az állapotát bejelöletlenből bejelölté. Ezt amit szeretnéd hogy legyen, de néha azt akarod hogy a jelelő négyzet alapból be legyen jelölve, azt csinálva hogy egy javaslatot tegyen a felhasználónak vagy azért hogy mutasd hogy egy jelelő négyzet értéke egy létező beállításhoz van kötve, pl. egy adatbázisról. Szerencsére, ez nagyon egyszerű - csak adj hozzá a checked attribútumot a jelelő négyzethez.

<input type="checkbox" name="nameOfChoice" value="1" checked>

Az xHTML régi napjaiban, ahol minden attribútumnak kellett hogy legyen egy értéke, még a boolean attribútumnak is, így nézett ki:

<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />

Bárhogyan fog működni minden böngészőben, de az első módszer rövidebb és sokkal inkább "HTML5-féle".

Több választós

So far, all our checkboxes have been simple switches, e.g. for defining whether an option is on or off. Checkboxes are great for that, but as mentioned, they can also be used to allow the user a selection of possible options. Let me show you a neat example where this makes sense:

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>

Notice how we now have multiple checkboxes, but they all share the same name ("favorite_pet") but different values (e.g. "Dogs"). When this form is submitted back to the server, all these checkboxes will be represented by a single name, but the value will be an array of 0-3 items. If you had used radio buttons instead of checkboxes, the user would only be allowed to pick a single favorite animal, but with checkboxes, they can select none of them, all of them or some of them.

Címkék a jelelő négyzeteknek

If you tested the previous example, you will notice that we can put text next to a checkbox, but they are still two separate things - you can't click the text to trigger the checkbox. This can be really annoying for the user, but fortunately for us, it's easy to solve: Just use the label element! Here's a basic example to show you the difference:

<input type="checkbox" name="favorite_pet" value="Cats">Cats<br>  
<input type="checkbox" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label><br>

Two checkboxes - one without a label and one with. They might look almost identical, but the one with the label can be triggered by clicking both the actual checkbox and the attached label. This is nice if you're sitting on a desktop PC with a mouse, but even better when you're using a touch device like a smartphone, where small checkboxes can be hard to hit with your finger.

The label is very simple - it uses the for attribute to attach itself to a form element with a matching id attribute (notice how I have "dogs" in both places).

Dinamikusan dolgozni egy jelelő dobozzal.

Just like any other DOM element, you are able to manipulate a checkbox using JavaScript. In that regard, it could be interesting to check whether a checkbox is checked or not and perhaps add some logic to control how many options a user can select. To show you how this can be done, I have extended a previous example (the "Favorite Pet" selector) to include some JavaScript magic:

<form method="post" action="/Tests/Post">  
    <fieldset>  
    <legend>What is Your Favorite Pet?</legend>  
    <input type="checkbox" name="favorite_pet" value="Cats" onclick="return ValidatePetSelection();">Cats<br>  
    <input type="checkbox" name="favorite_pet" value="Dogs" onclick="return ValidatePetSelection();">Dogs<br>  
    <input type="checkbox" name="favorite_pet" value="Birds" onclick="return ValidatePetSelection();">Birds<br>  
        <br>  
    <input type="submit" value="Submit now">  
    </fieldset>  
</form>  

<script type="text/javascript">  
function ValidatePetSelection()  
{  
    var checkboxes = document.getElementsByName("favorite_pet");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 2)  
    {  
        alert("You can't select more than two favorite pets!");  
        return false;  
    }  
}  
</script>

Allow me to quickly run through what this code does. We have the same form as before, but we have added an event handler to each of the checkboxes, which causes them to call a JavaScript function (ValidatePetSelection) when the user clicks them. In this function, we get a hold of all the relevant checkboxes using the getElementsByName function and then we loop through them to see if they are checked or not - for each checked item, we add to a number. This number is then checked and if it exceeds two, then we alert the user about the problem (only two pets can be selected) and then we return false. Returning false will prevent the checkbox from being checked.

This was just a simple example of how to work with checkboxes using JavaScript. You can do much more, especially if you use a JavaScript framework like jQuery, which will make it a lot easier to select and manipulate DOM elements.

Összegző

Checkboxes allow you to setup selectable options for your users - either to toggle a single setting on or off, or to allow for multiple choices, like in the Favorite Pet example. You should use labels to tie your checkbox and the descriptive text together, to allow the user to click a larger area when manipulating the checkbox - this is also good for assisting technologies like screen readers for visually impaired.