如何使用jQuery切換CSS3複選框？

我一直在尋找這樣一個演示CSS3複選框：如何使用jQuery切換CSS3複選框？

http://cssdeck.com/labs/css-checkbox-styles

它可以切換此複選框（在一個在下面的代碼段）與jQuery？

另外，我可以通過jQuery檢索複選框狀態嗎？

我一直在試圖按照螢火蟲當你點擊複選框會發生什麼，似乎這被應用於：

.squaredThree input[type="checkbox"]:checked + label::after { 
    opacity: 1; 
}

我已經嘗試沒有成功如下：

$("#squaredThree").prop("checked",true); 

$(".squaredThree input[type='checkbox'] + label::after").css("opacity","1");

/* SQUARED THREE */ 
 

 
.squaredThree { 
 
    width: 20px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 
.squaredThree label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    top: 0; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4); 
 
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4); 
 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4); 
 
    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
 
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
 
    background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
 
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
 
    background: linear-gradient(top, #222 0%, #45484d 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0); 
 
} 
 
.squaredThree label:after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 9px; 
 
    height: 5px; 
 
    background: transparent; 
 
    top: 4px; 
 
    left: 4px; 
 
    border: 3px solid #fcfff4; 
 
    border-top: none; 
 
    border-right: none; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 
.squaredThree label:hover::after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
 
    filter: alpha(opacity=30); 
 
    opacity: 0.3; 
 
} 
 
.squaredThree input[type=checkbox]:checked + label:after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
}

<!-- Squared THREE --> 
 
<div class="squaredThree"> 
 
    <input type="checkbox" value="None" id="squaredThree" name="check" /> 
 
    <label for="squaredThree"></label> 
 
</div>

來源

2016-08-14 user1063287

試試這個

獲取狀態 - var state = document.getElementById('squaredThree').checked;

設置爲TRUE - document.getElementById('squaredThree').checked = true;

設置爲假document.getElementById('squaredThree').checked = false;

來源

2016-08-14 10:23:09

如何使用jQuery切換CSS3複選框？

回答

相關問題