jquery不同版本导致的checkbox设置了属性，但是没有选中效果

由于本人好久不做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>

View Code

当前这段代码使用的jquery版本是11的，因为要支持html5.希望大家提更多的解决方案，交流。