如何使复选框进入“已检查”默认？ [英] How to make checkbox into "Checked" by default?
本文介绍了如何使复选框进入“已检查”默认？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我实现了一个基于CSS3的复选框，其中默认的复选框将被隐藏，一些彩色的bg div将显示在它的顶部。问题是我需要这个作为检查当页面加载...
I have implemented a CSS3 based checkbox where default checkbox will be hidden and some colored bg div will be shown at the top of it. The problem is I need this as "checked" when page loading...
请帮我。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body { font-family:Verdana, Geneva, sans-serif; font-size:12px;}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.cmn-toggle-yes-no + label {
padding: 2px;
width: 70px;
height: 30px;
color:#000;
}
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
display: block;
position: absolute;
top: 5px;
left: 0;
bottom: 0;
right: 0;
text-align: center;
line-height: 24px;
border-radius:4px;
margin:0px 8px;
}
input.cmn-toggle-yes-no + label:before {
background-color: #dfdfdf;
border: 1px solid #d2d1d1;
color: #888;
content: attr(data-off);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
background-color:#48BD7F;
color:#fff;
border:1px solid #2da063;
content: attr(data-on);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.switch-toggle.alert-success {
background-color:#fff;
border:1px solid #b8b8b8;
color: #333;
-moz-box-shadow: inset 0 0 10px #cfcfcf;
-webkit-box-shadow: inset 0 0 10px #cfcfcf;
box-shadow: inset 0 0 10px #cfcfcf;
}
</style> </head>
<body>
<div>
<input type="checkbox" id="toggle-1" class="cmn-toggle cmn-toggle-yes-no">
<label for="toggle-1" data-on="Yes" data-off="No"></label>
</div>
</body>
</html>
推荐答案
将复选框标记为已选中
< input type =checkboxid =toggle-1checked =checkedclass =cmn-toggle cmn-toggle-yes-no >
这篇关于如何使复选框进入“已检查”默认？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
