Uable將複選框設置爲選中

Question

我已經抓住了一些CSS來美化我的複選框，並且因爲它們設置了它們自己點擊時進行檢查，並且我不確定問題出在哪裏。 CSS的是：

.time-check-input{ 
    width: 20px; 
    position: relative; 
    margin: 20px auto; 
    label { 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #fcfff4; 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    border-radius: 4px; 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    &:after { 
     content: ''; 
     width: 9px; 
     height: 5px; 
     position: absolute; 
     top: 4px; 
     left: 4px; 
     border: 3px solid #333; 
     border-top: none; 
     border-right: none; 
     background: transparent; 
     opacity: 0; 
     transform: rotate(-45deg); 
    } 
    &:hover::after { 
     opacity: 0.5; 
    } 
    } 
    input[type=checkbox] { 
    visibility: hidden; 
    &:checked + label:after { 
     opacity: 1; 
    } 
    }  
} 

和HTML：

<div class="time-check"> 
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/> 
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span> 
</div> 

我不介意用JavaScript做它 - 它並不必須是所有的CSS但很明顯，我寧願少JS作爲/ jquery儘可能。

Answer 1

您可以使用JavaScript的方式來設置的複選框checked

document.getElementsByClassName('time-check-input')[0].checked = true;

<div class="time-check"> 
 
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/> 
 
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span> 
 
</div>

如果你想使用jQuery則：

$('.time-check-input').attr('checked',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="time-check"> 
 
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/> 
 
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span> 
 
</div>

Answer 2

我認爲這個問題可能只是在你的SASS/LESS，我vanilla'd你的CSS，這一切工作正常的我

.squaredFour { 
 
    width: 20px; 
 
    position: relative; 
 
    margin: 20px auto; 
 
} 
 
.squaredFour label { 
 
    width: 20px; 
 
    height: 20px; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #fcfff4; 
 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
 
    border-radius: 4px; 
 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
 
} 
 
.squaredFour label:after { 
 
     content: ''; 
 
     width: 9px; 
 
     height: 5px; 
 
     position: absolute; 
 
     top: 4px; 
 
     left: 4px; 
 
     border: 3px solid #333; 
 
     border-top: none; 
 
     border-right: none; 
 
     background: transparent; 
 
     opacity: 0; 
 
     transform: rotate(-45deg); 
 
    } 
 
.squaredFour label:hover::after { 
 
     opacity: 0.5; 
 
    } 
 
.squaredFour input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
.squaredFour input[type=checkbox]:checked + label:after 
 
{ 
 
     opacity: 1; 
 
}

<div class="squaredFour time-check"> 
 
    <input type="checkbox" value="None" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/> 
 
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span> 
 
</div>