我想自定义一个复选框,而不在 jquery.mobile 中的复选框旁边显示标签。怎么做?
问问题
757 次
1 回答
0
<!DOCTYPE html>
<html>
<head>
<title>test checkbox</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
.checkbox-left{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.not-checked, .checked {
background-image: url("http://www.dragan-gaic.info/elements.png");
background-repeat: no-repeat;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
.hidden-checkbox {
display: none;
}
</style>
</head>
<body>
<div data-role="page" id="testPage">
<div class="checkbox-left"><input type="checkbox" name="testCb" id="testCb" class="hidden-checkbox"/></div>
</div>
<script type="text/javascript">
$('#testPage').on('pageshow', function(){
$('.checkbox-left').off('click').on('click', function(){
if($(this).find('input[type="checkbox"]').attr('checked')){
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked' , false).checkboxradio("refresh");
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked' , true).checkboxradio("refresh");
}
});
});
</script>
</body>
</html>
于 2013-08-07T08:34:11.673 回答