自動起動チェックボックスを修正するにはどうすればよいですか？

Question

$(document).ready(function(){ 
 
\t \t if($('.checkbox1').attr('checked') == true) { 
 
\t \t \t $(".worddoc").animate({opacity:1},700); 
 
\t \t } 
 
\t })

.checkbox1 { 
 
    width: 50px; 
 
    height: 26px; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.checkbox1:not(checked) + label { 
 
    padding-right: 100%; 
 
    position: relative; 
 
} 
 

 
.checkbox1:not(checked) + label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -4px; 
 
    left: 71%; 
 
    width: 50px; 
 
    height: 26px; 
 
    border-radius: 13px; 
 
    background: #CDD1DA; 
 
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 

 
.checkbox1:not(checked) + label:not(checked):before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 22px; 
 
    height: 22px; 
 
    border-radius: 10px; 
 
    background: #FFF; 
 
    left: 73%; 
 
    top: -2px; 
 
    z-index: 998; 
 
    transition: all 0.2s; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 

 
.checkbox1:checked + label:after { 
 
    background: #9FD468; 
 
} 
 

 
.checkbox1:checked + label:before { 
 
    left: 82%; 
 
} 
 

 
.label1 { 
 
    color: white; 
 
    font-family: OpenSansRegular; 
 
    font-size: 15px; 
 
    position: absolute; 
 
    float: left; 
 
    top: 30px; 
 
    margin-left: 0; 
 
} 
 

 
.worddoc { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: orange; 
 
    z-index: 999; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="checkbox" class="checkbox1" id="checkbox1" autocomplete="off"/> 
 
\t \t <label for="checkbox1" class="label1">jQuery</label> 
 
<div class="worddoc"></div>

やあみんな。チェックボックスがアクティブなときに私の1要素が表示されますが、WebサイトにDOMをロードした直後にアクティブになります。 autocomplete = "off"属性では問題は解決されません。助けて！私はあなたに頼っているよ！

Answer 1

$(document).ready(function(){ 
    $('.checkbox1').click(function() { 
     if($(this).attr('checked')) { 
     $(".worddoc").animate({opacity:1,right:0},700); 
    } 
    }); 
});