Div Forms

by Emily Humphrey

HTML

<form>
    <div class="cleanday">
        <a href="#" class="clean-sun clean-check">S</a>
        <a href="#" class="clean-mon clean-check">M</a>
        <a href="#" class="clean-tue clean-check">T</a>
        <a href="#" class="clean-wed clean-check">W</a>
        <a href="#" class="clean-thur clean-check">T</a>
        <a href="#" class="clean-fri clean-check">F</a>
        <a href="#" class="clean-sat clean-check">S</a>
    </div>
    <div class="hidden">
        <input type="checkbox" name="clean-day" value="sunday" class="sun">
        <input type="checkbox" name="clean-day" value="monday" class="mon">
        <input type="checkbox" name="clean-day" value="tuesday" class="tue">
        <input type="checkbox" name="clean-day" value="wednesday" class="wed">
        <input type="checkbox" name="clean-day" value="thursday" class="thur">
        <input type="checkbox" name="clean-day" value="friday" class="fri">
        <input type="checkbox" name="clean-day" value="saturday" class="sat">
    </div>
</form>

CSS

body{
    background: #ECE8E1;
    color: #231F20;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding: 0px;
    margin:0px;
    overflow-y: scroll;
    font-size: 16px;
    line-height:20px;
}

a.clean-check{
    display:block;
    height:32px;
    width:56px;
    z-index:1;
    -webkit-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5) inset;
    background-color: whiteSmoke;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#F1F1F1);
    background-image: -moz-linear-gradient(top,#f5f5f5,#F1F1F1);
    background-image: -ms-linear-gradient(top,#f5f5f5,#F1F1F1);
    background-image: -o-linear-gradient(top,#f5f5f5,#F1F1F1);
    background-image: linear-gradient(top,#f5f5f5,#F1F1F1);
    border: 1px solid gainsboro;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0px solid gainsboro;
    font-size:11px;
    line-height:32px;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    color:#444;
    float:left;
}
    a.clean-check:last-of-type{
        border-right: 1px solid gainsboro;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }

a.clean-check:hover{
    -webkit-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.7) inset;
    -moz-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.7) inset;
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.7) inset;
    background-image: -webkit-linear-gradient(bottom,#f5f5f5,#F1F1F1);
    background-image: -moz-linear-gradient(bottom,#f5f5f5,#F1F1F1);
    background-image: -ms-linear-gradient(bottom,#f5f5f5,#F1F1F1);
    background-image: -o-linear-gradient(bottom,#f5f5f5,#F1F1F1);
    background-image: linear-gradient(bottom,#f5f5f5,#F1F1F1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 0px solid rgba(0, 0, 0, 0.1);
}
    a.clean-check:hover:last-of-type{
        border-right: 1px solid gainsboro;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
   ...

JavaScript

$(function() {
    var clean_sun = false;
    $('a.clean-sun').click(function(event) {
        event.preventDefault();
        if (clean_sun === false){
          $('.sun').attr('checked', true);
          $('a.clean-sun').addClass('checked');
          clean_sun = true;
        }
        else{
          $('.sun').attr('checked',false);
          $('a.clean-sun').removeClass('checked');
          clean_sun = false;
        }
    });var clean_mon = false;
    $('a.clean-mon').click(function(event) {
        event.preventDefault();
        if (clean_mon === false){
          $('.mon').attr('checked', true);
          $('a.clean-mon').addClass('checked');
          clean_mon = true;
        }
        else{
          $('.mon').attr('checked',false);
          $('a.clean-mon').removeClass('checked');
          clean_mon = false;
        }
    });
    var clean_tue = false;
    $('a.clean-tue').click(function(event) {
        event.preventDefault();
        if (clean_tue === false){
          $('.tue').attr('checked', true);
          $('a.clean-tue').addClass('checked');
          clean_tue = true;
        }
        else{
          $('.tue').attr('checked',false);
          $('a.clean-tue').removeClass('checked');
          clean_tue = false;
        }
    });
    var clean_wed = false;
    $('a.clean-wed').click(function(event) {
        event.preventDefault();
        if (clean_wed === false){
          $('.wed').attr('checked', true);
          $('a.clean-wed').addClass('checked');
          clean_wed = true;
        }
        else{
          $('.wed').attr('checked',false);
          $('a.clean-wed').removeClass('checked');
          clean_wed = false;
        }
    });
    var clean_thur = false;
    $('a.clean-thur').click(function(event) {
        event.preventDefault();
        if (clean_thur === false){
          $('.thur').attr('checked', true);
          $('a.clean-thur').addClass('checked');
          clean_thur = true;
        }
        else{
         ...