jQuery Mobile: Vertically Grouped Checkbox

This entry is part 15 of 73 in the series jQuery Mobile

Usually, we have the checkboxes arranged in vertical group format.

To integrate multiple checkboxes into a grouped button set, we put data-role=’controlgroup’ attribute on the fieldset.

Vertically Grouped Checkbox
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Vertical Group Checkbox</h1></div>
    <br>

    <p>Vertical Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-v-2a' id='checkbox-v-2a'>
            <label for='checkbox-v-2a'>One</label>
            <input type='checkbox' name='checkbox-v-2b' id='checkbox-v-2b'>
            <label for='checkbox-v-2b'>Two</label>
            <input type='checkbox' name='checkbox-v-2c' id='checkbox-v-2c'>
            <label for='checkbox-v-2c'>Three</label>
        </fieldset>
    </form>
  
    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: Basic Check Box

This entry is part 13 of 73 in the series jQuery Mobile

Checkbox inputs are used to provide a list of options where more than one option can be selected.

We first look at creating a basic checkbox.

Checkbox
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Basic Check Box</h1></div>
    <br>
    <p>Basic Check Box</p>
    <form>
        <label>
            <input type='checkbox' name='checkbox'>Check me
        </label>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code
The label tag in HTML5

Label tag is found in HTML5.  This is generally for users using a mouse in the web.

With label, you can also click on the label to make a selection.

So if you click on the label Check me, it is the same as clicking on the checkbox, toggling the selection.

jQuery Mobile: All Checkboxes

This entry is part 20 of 73 in the series jQuery Mobile

Checkbox inputs are used to provide a list of options where more than one can be selected.

Here I put them all in a page.

All Checkboxes
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>Checkbox App</h1></div>
    <br>
    <p>Basic Check Box</p>
    <form>
        <label>
            <input type='checkbox' name='checkbox-0 '>Check me
        </label>
    </form>
<br>
    <p>Mini Size Check Box</p>
    <form>
        <input type='checkbox' name='checkbox-mini-0' id='checkbox-mini-0' data-mini='true'>
        <label for='checkbox-mini-0'>I agree</label>
    </form>
    <br>
    <p>Vertical Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-v-2a' id='checkbox-v-2a'>
            <label for='checkbox-v-2a'>One</label>
            <input type='checkbox' name='checkbox-v-2b' id='checkbox-v-2b'>
            <label for='checkbox-v-2b'>Two</label>
            <input type='checkbox' name='checkbox-v-2c' id='checkbox-v-2c'>
            <label for='checkbox-v-2c'>Three</label>
        </fieldset>
    </form>
    <br>
    <p>Horizontal Group Check Box</p>
    <form>
        <fieldset data-role='controlgroup' data-type='horizontal'>
            <input type='checkbox' name='checkbox-h-2a' id='checkbox-h-2a'>
            <label for='checkbox-h-2a'>One</label>
            <input type='checkbox' name='checkbox-h-2b' id='checkbox-h-2b'>
            <label for='checkbox-h-2b'>Two</label>
            <input type='checkbox' name='checkbox-h-2c' id='checkbox-h-2c'>
            <label for='checkbox-h-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Icon Position right</p>
    <form>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox-h-6a' id='checkbox-h-6a'>
            <label for='checkbox-h-6a'>One</label>
            <input type='checkbox' name='checkbox-h-6b' id='checkbox-h-6b'>
            <label for='checkbox-h-6b'>Two</label>
            <input type='checkbox' name='checkbox-h-6c' id='checkbox-h-6c'>
            <label for='checkbox-h-6c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Theme B</p>
    <form>
        <fieldset data-role='controlgroup'>
            <input type='checkbox' name='checkbox-t-2a' id='checkbox-t-2a' data-theme='b'>
            <label for='checkbox-t-2a'>One</label>
            <input type='checkbox' name='checkbox-t-2b' id='checkbox-t-2b' data-theme='b'>
            <label for='checkbox-t-2b'>Two</label>
            <input type='checkbox' name='checkbox-t-2c' id='checkbox-t-2c' data-theme='b'>
            <label for='checkbox-t-2c'>Three</label>
        </fieldset>
    </form>

    <br>
    <p>Disabled</p>
    <form>
        <input disabled='' type='checkbox' name='checkbox-t-2d' id='checkbox-t-2d' data-theme='a'>
        <label for='checkbox-t-2d'>One</label>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

If the input isn’t wrapped in its corresponding label, be sure to set the for attribute of the label to match the id of the input so that they are associated.

PHP: Multi-Checkbox

This entry is part 47 of 54 in the series PHP Tutorial

Most of the time, we work with form with multiple number of checkboxes.

Consider the code below:

<form action="multi_checkbox.php" method="post">
    Which sports do you like?<br>
    <input type="checkbox" name="sport[]" value="tennis"/>Tennis<br>
    <input type="checkbox" name="sport[]" value="swimming"/>Swimming<br>
    <input type="checkbox" name="sport[]" value="basketball"/>Basketball<br><br>

    <input type="submit" name="submit_name" value="Click Me"/>
</form>

<?php
if (isset($_POST['sport'])) {
    $array_sport = $_POST['sport'];
    $chkboxlength = count($array_sport);

    echo "You like:<br>";
    for ($i = 0; $i < $chkboxlength; $i++) {
        echo "$array_sport[$i]";
        echo "<br>";
    }
}
?>

You can try the code above here.

Notice that though I have started echoing out the array from $i=0 in line 16. Only checked boxes were printed out.

We have name=”sport[]” thus turning sport into an array declaration.  The final variable $array_sport will thus be an array.

When a box is checked, it will be inserted into the $array_sport array in line 17 starting with index=0.

PHP: Is the checkbox checked?

This entry is part 46 of 54 in the series PHP Tutorial

We look at a simple check box form where it asks a simple question. Is thecheck box checked?

<form action="chkbox.php" method="post">
    Do you like the song Upwhere We Belong?
    <input type="checkbox" name="like" value="yes"/>
    <input type="submit" name="submit_name" value="Submit"/>
</form>

<?php
if (isset($_POST['submit_name'])) {
    if (isset($_POST['like'])) {
        echo "<p>You like the song.</p>";
    } else {
        echo "<p>You don't like the song.</p>";
    }
}
?>

The check box form can be tried out here.

If a checkbox is checked, the $_POST[‘like’] will be set to 1.  Else, it will be set to 0.