custom checkbox

by Jesse M

HTML

<label data-name="primary-residence" data-value="Yes">
  <input type="hidden" id="primary-residence" name="Primary Residence" value="" />
  <div class="big-check-box"></div> Primary Residence
</label>
<input type="text" id="primary-residence-value" class="hidden" name="Current Value of Residence:" value="" placeholder="Current Value" />
<input type="text" id="primary-residence-loan-balance" class="hidden" name="Loan Balance of Residence:" value="" placeholder="Loan Balance" />

SCSS

$blue:#4d6374;

@mixin transition($speed){
    -webkit-transition:all $speed ease-in-out;
	-moz-transition:all $speed ease-in-out;
	-o-transition:all $speed ease-in-out;
	transition:all $speed ease-in-out;
    }

.hidden { display:none; }

.big-check-box {
                    display:inline-block;
                    border:2px solid $blue;
                    background:transparent;
                    width:30px;
                    height:30px;
                    cursor:pointer !important;
                    position:relative;
                    margin-bottom:-10px;
                    margin-right:8px;
                }
                .big-check-box:before {
                    width:0;
                    height:0;
                    background:$blue;
                    position:absolute;
                    top:50%;
                    left:50%;
                    content:'';
                    @include transition(.2s);
                }
                label:hover .big-check-box:before, .big-check-box.checked:before {
                    width:100%;
                    height:100%;
                    top:0;
                    left:0;
                }

JavaScript

$('label').on('click', function(){
        var name = $(this).data('name');
        var value = $(this).data('value');
        if($(this).find('.big-check-box').hasClass('checked')){
            $(this).find('.big-check-box').removeClass('checked');
            $('#'+name).val('');
            $('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
        }else{
            $('#'+name).val(value);
            $(this).find('.big-check-box').addClass('checked');
            $('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
        }
    });