simple custom checkboxes - jQuery Snipplr Social Repository

Revision: 69010

at May 8, 2015 07:15 by del4y

Updated Code

/**
 * Example:
 *
 * HTML:
 * <button data-checkbox="state" data-value="1">ready</button>
 * <button data-checkbox="state" data-value="2">busy</button>
 *
 * CSS:
 * .active {
 *     background-color: red;
 * }
 */

$(document).ready(function(){
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;

        $checkbox.data('checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.data('value') + '" style="display:none">');
        $realCheckbox.insertAfter($checkbox);

        // Check if is selected
        if (parseInt($checkbox.data('checkbox-selected')) === 1 || $checkbox.hasClass('active')) {
            $realCheckbox.prop('checked', true);
            $checkbox.addClass('active');
        }
    }

    $checkboxes.unbind('click').on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.prop('checked')) {
            $(this).removeClass('active');
            $checkbox.removeProp('checked');
        } else {
            $(this).addClass('active');
            $checkbox.prop('checked', true);
        }
    });
}

Revision: 69009

at April 3, 2015 00:05 by del4y

Updated Code

/**
 * Example:
 *
 * HTML:
 * <button data-checkbox="state" data-value="1">ready</button>
 * <button data-checkbox="state" data-value="2">busy</button>
 *
 * CSS:
 * .active {
 *     background-color: red;
 * }
 */

$(document).ready(function(){
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.data('value') + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Revision: 69008

at April 2, 2015 23:54 by del4y

Updated Code

/**
 * Example:
 *
 * <button data-checkbox="state" data-value="1">ready</button>
 * <button data-checkbox="state" data-value="2">busy</button>
 */

$(document).ready(function(){
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.data('value') + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Revision: 69007

at April 2, 2015 23:53 by del4y

Updated Code

/**
 * Example:
 *
 * <button data-checkbox="state" value="1">ready</button>
 * <button data-checkbox="state" value="2">busy</button>
 */

$(document).ready(function(){
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.data('value') + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Revision: 69006

at April 2, 2015 23:45 by del4y

Updated Code

$(document).ready(function(){
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.html() + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Revision: 69005

at April 2, 2015 23:39 by del4y

Updated Code

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.html() + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Revision: 69004

at April 2, 2015 23:38 by del4y

Initial Code

$(document).ready(function () {
    initializeCheckBoxes();
});

function initializeCheckBoxes() {
    var $checkboxes = $('[data-checkbox]');

    for (var i = 0; i < $checkboxes.length; i++) {
        var $checkbox = $($checkboxes[i]);
        var id = $checkbox.data('checkbox') + '-' + i;
        var checked = $checkbox.hasClass('active') ? 'checked="checked"' : '';

        $checkbox.attr('data-checkbox-id', id);

        var $realCheckbox = $('<input type="checkbox" id="' + id + '" name="' + $checkbox.data('checkbox') + '" value="' + $checkbox.html() + '" style="display:none" ' + checked + '>');
        $realCheckbox.insertAfter($checkbox);
    }

    $checkboxes.on('click', function () {
        var checkBoxId = $(this).data('checkbox-id');
        var $checkbox = $('#' + checkBoxId);

        if ($checkbox.attr('checked')) {
            $(this).removeClass('active');
            $checkbox.removeAttr('checked');
        } else {
            $(this).addClass('active');
            $checkbox.attr('checked', 'checked');
        }
    });
}

Initial URL

Initial Description

This is a simple way to make custom checkboxes in jQuery.

Initial Title

simple custom checkboxes

Initial Tags

javascript, simple, jquery

Initial Language

jQuery

Choose a language for easy browsing: