以下是 Bootstrap复选框样式美化特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312">
<title>Bootstrap复选框样式美化特效</title>
<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="form-horizontal">
<div class="form-group checkbox">
<div class="col-sm-1">
<input type="text" class="form-control" value="1" />
</div>
<button type="button" class="btn btn-success"><span class="fa fa-check-square-o"></span></button>
</div>
<div class="form-group checkbox">
<div class="col-sm-1">
<input type="text" class="form-control" value="0" />
</div>
<button type="button" class="btn btn-default"><span class="fa fa-square-o"></span></button>
</div>
<div class="form-group checkbox">
<div class="col-sm-1">
<input type="text" class="form-control" value="0" />
</div>
<button type="button" class="btn btn-default"><span class="fa fa-square-o"></span></button>
</div>
</form>
<script src='js/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(index.js):
$('.checkbox .btn').on('click',function(){
var hiddenField = $(this).parent().find('input[type=text]'),val = hiddenField.val();
hiddenField.val(val === "1" ? "0":"1");
$(this).toggleClass('btn-success btn-default');
$(this).find('span.fa').toggleClass('fa-check-square-o fa-square-o');
}
);
CSS代码(style.css):
body{margin:50px;}
.btn{outline:none !important;}
分享到QQ
分享到微博
微信扫一扫
