由于本人好久不做B/S了，今天同学问我个问题才发现了jquery版本还是存在差异的，今天写的就是关于获取checkbox属性的方式（可能不应该叫属性了其实，后面就知道了）。
看下面的代码截图吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".l-checkbox").click(function(){
var c=$("#box").attr("checked");
alert(c);
if(c)
{
$(this).parent().children("input").removeAttr("checked");
}
else{
$(this).parent().children("input").attr("checked","checked");
}
});
});
</script>
<style>
/**
* 隐藏默认的checkbox
*/
input[type=checkbox]
{
visibility: hidden;
}
.item_checkbox
{
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
30px;
height: 30px;
background: #ddd;
border-radius: 100%;
position: relative;
border: 1px solid #b9b9b9;
}
.item_checkbox label
{
display: block;
30px;
height: 30px;
border-radius: 100px;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: #FFFFFF;
}
.item_checkbox input[type=checkbox]:checked + label
{
background: red;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="item_checkbox fl">
<input type="checkbox" value="1" id="box" name="" />
<label class="l-checkbox" value="ssss">
</label>
</div>
</body>
</html>
最初是通过$("#box").attr("checked");方式获取值，并且肯定会通过$("#box").attr("checked","checked");方式设置它的值。OK，打开页面第一次选中、取消很完美实现效果。然后到了第二次的时候有一点不完美，但是比较神奇。因为通过调试F12，属性已经设置到了控件上面，但是就是没有选中的效果。
进入到正题了，开始解决神奇的问题。
我在网上查资料看到了下面这段话，于是就明白了所谓的jquery版本不同造成的个别差异：
看完都会解决问题了，所以我就不多说了。通过$("#box").prop("checked")获取到属性的值，通过$("input").prop({checked:false}); 方式进行设置值就好了。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/jquery.dialogbox.css" /> 7 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="js/jquery.dialogBox.js" ></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $(".l-checkbox").click(function(){ 12 if($("#box").prop("checked")) 13 { 14 $("input").prop({checked:false}); 15 } 16 else{ 17 $("input").prop({checked:true}); 18 } 19 }); 20 }); 21 </script> 22 23 <style> 24 /** 25 * 隐藏默认的checkbox 26 */ 27 input[type=checkbox] 28 { 29 visibility: hidden; 30 } 31 .item_checkbox 32 { 33 margin-top: 30px; 34 margin-left: 30px; 35 margin-right: 30px; 36 width: 30px; 37 height: 30px; 38 background: #ddd; 39 border-radius: 100%; 40 position: relative; 41 border: 1px solid #b9b9b9; 42 } 43 .item_checkbox label 44 { 45 display: block; 46 width: 30px; 47 height: 30px; 48 border-radius: 100px; 49 cursor: pointer; 50 position: absolute; 51 top: 0px; 52 left: 0px; 53 z-index: 1; 54 background: #FFFFFF; 55 } 56 .item_checkbox input[type=checkbox]:checked + label 57 { 58 background: red; 59 border-radius: 100%; 60 } 61 </style> 62 </head> 63 <body> 64 <div class="item_checkbox fl"> 65 <input type="checkbox" value="1" name="11" id="box" tag="ceshi"/> 66 <label class="l-checkbox"> 67 </label> 68 </div> 69 <div > 70 <button class="logpwd_show_bt">只能使用1.9以上版本</button> 71 </div> 72 73 <div id="simple-dialogBox" class="dialogBox"> 74 75 </div> 76 <style type="text/css"> 77 .dialog-box{ 78 width: 100%; 79 } 80 81 .dialog-box-container 82 { 83 width: 90%; 84 } 85 86 .dialog-box-content 87 { 88 text-align: center; 89 background: #84c225; 90 91 } 92 .dialog-box-content 93 { 94 color: #FFFFFF; 95 font-size: 0.18rem; 96 } 97 </style> 98 <script type="text/javascript"> 99 $(function () { 100 $('.logpwd_show_bt').click(function(){ 101 $('#simple-dialogBox').dialogBox({ 102 autoHide: true, 103 time: 2000, 104 hasClose: true, 105 hasMask: true, 106 content: '新密码设置成功' 107 }); 108 }) 109 }) 110 </script> 111 </body> 112 </html>
当前这段代码使用的jquery版本是11的，因为要支持html5.希望大家提更多的解决方案，交流。