javaScript] 체크박스 색상 입히기(color picker)

Html]

<input type="checkbox" name="colorCheckbox" class="green" />

<input type="checkbox" name="colorCheckbox" class="red" />

<input type="checkbox" name="colorCheckbox" class="purple" />

Style]

 <style type="text/css">

        .checkbox {

            width: 19px;

            height: 20px;

            padding: 0px;

            background: url("/Content/Images/checkboxBG.jpg");

            display: block;

            float: left;

        }

        

        .checked { background-position: 0px -50px; }

        .clicked { background-position: 0px -25px; }

        .clicked.checked { background-position: 0px -75px; }

        

        .green { background-color: Green; }

        .red { background-color: red; }

        .purple { background-color: purple; }

    </style>

javaScript]

  <script type="text/javascript">

        $(function() {

            $('input[name=colorCheckbox]').each(function() {

                var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck);                

                if ($(this).is(':checked')) { span.addClass('checked'); }

                $(this).wrap(span).hide();

            });

            function doCheck() {

                if ($(this).hasClass('checked')) {

                    $(this).removeClass('checked');

                    $(this).children().prop("checked", false);

                } else {

                    $(this).addClass('checked');

                    $(this).children().prop("checked", true);

                }

            }

        });

</script>

이미지]