直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<script type='text/javascript' src='../js/jquery-1.8.3.js'></script>
</head>
<style>
.checkbox {
width: 100px;
height: 20px;
background-color: #C8C7CC;
color: #000;
border-radius: 5px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
padding: 6px;
}
.checkbox-click {
width: 100px;
height: 20px;
border: 1px solid #F00;
background-color: #FFF;
color: #F00;
border-radius: 5px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
padding: 6px;
}
.checkbox p{
margin-top: 0px;
}
.checkbox-click p{
margin-top: 0px;
}
</style>
<script type='text/javascript'>
$(function() {
no_click();
});
function no_click(){
$('.checkbox').attr('value',false);
$('.checkbox').click(function() {
$("#"+this.id + " img").remove();
var _img = document.createElement("img");
_img.style.height = "12px";
_img.style.float = "left";
_img.style.marginTop = "4px"
_img.src = "../images/tick.png";
this.insertBefore(_img,this.childNodes[0]);
$(this).attr('class', 'checkbox-click') //
$(this).attr('value',true);
y_click();
});
}
function y_click(){
$('.checkbox-click').click(function() {
$("#"+this.id + " img").remove();
$(this).attr('value',false);
$(this).attr('class', 'checkbox') //
no_click();
})
}
function trueorfalse(){
var checkbox = $(".mui-content div")
for (var i = 0; i < checkbox.length; i++) {
alert(checkbox[i].getAttribute('value'));
}
}
</script>
<body>
<div class='mui-content'>
<div id='t' class='checkbox'>
<p>已合格</p>
</div>
<div id='t1' class='checkbox'>
<p>不合格</p>
</div>
<div id='t2' class='checkbox'>
<p>未合格</p>
</div>
</div>
<br />
<button οnclick="trueorfalse()">看看选中没有</button>
</body>
</html>
效果