JSFiddle - React, Tailwind, and code Playground

by hi888888

HTML

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $(".checkbox").dgStyle();
});
    </script>
    <script type="text/javascript">
$(function () {
    $('#SelectAll').toggle(
        function() {
            $('#checkboxall .truefalse').prop('checked', true);
        },
        function() {
            $('#checkboxall .truefalse').prop('checked', false);
        }
    );
}); </script>
<body>
<form method="post" action="post.php">
<div id="checkboxall">

<div class="checkbox">
<input type="checkbox" id="SelectAll" name="SelectAll" >
</div>
<label for="SelectAll">Select All</label>

<div class="checkbox">
<input type="checkbox" class="truefalse">
</div>
<label for="Astrology">Astrology</label>

<div class="checkbox">
<input type="checkbox" class="truefalse" >
</div>
<label for="Astronomy">Astronomy</label>



</div>
</form>
</body>
</html>

CSS

.checkbox {
    height: 25px;
    width: 19px;
    clear:left;
    float:left;
    margin: 0 0 3px;
    padding: 0 0 0 26px;
    background: url("http://dl.dropbox.com/u/17797075/checkbox.gif") no-repeat;
    cursor: default;
    text-align:left;
}
.checkbox input,.radio input {
    display: none;
}
.checkbox input.show,.radio input.show {
    display: inline;
}
.selected {
    background-position: 0 -52px;
}
#checkboxall{
    width:100%;
}
.block {
    width: 50%;
    float: left;
}
label {
    padding-left:10px;
    float:left;
    text-align:left;
}
body {
font-family:arial;
font-size:13px;
color:#343434;
}

JavaScript

//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala - [email protected]
// Date of Release: 13th March 10
// Version: 0.8
/*
 USAGE:
    $(document).ready(function(){
        $(":radio").behaveLikeCheckbox();
    }
*/

var elmHeight = "25";    // should be specified based on image size

// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
dgStyle: function()
{
    // Initialize with initial load time control state
    $.each($(this), function(){
        var elm    =    $(this).children().get(0);
        elmType = $(elm).attr("type");
        $(this).data('type',elmType);
        $(this).data('checked',$(elm).attr("checked"));
        $(this).dgClear();
    });
    $(this).mousedown(function() { $(this).dgEffect(); });
    $(this).mouseup(function() { $(this).dgHandle(); });    
},
dgClear: function()
{
    if($(this).data("checked") == true)
    {
        $(this).css("backgroundPosition","center -"+(elmHeight*2)+"px");
        }
    else
    {
        $(this).css("backgroundPosition","center 0");
        }    
},
dgEffect: function()
{
    if($(this).data("checked") == true)
        $(this).css({backgroundPosition:"center -"+(elmHeight*3)+"px"});
    else
        $(this).css({backgroundPosition:"center -"+(elmHeight)+"px"});
},
dgHandle: function()
{
    var elm    =    $(this).children().get(0);
    if($(this).data("checked") == true)
        $(elm).dgUncheck(this);
    else
        $(elm).dgCheck(this);
    
    if($(this).data('type') == 'radio')
    {
        $.each($("input[name='"+$(elm).attr("name")+"']"),function()
        {
            if(elm!=this)
                $(this).dgUncheck(-1);
        });
    }
},
dgCheck: function(div)
{
    $(this).attr("checked",true);
    $(div).data('checked',true).css({backgroundPosition:"center -"+(elmHeight*2)+"px"});
},
dgUncheck: function(div)
{
   ...