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

            width: 30px;

            height: 30px;

            background: #ddd;

            border-radius: 100%;

            position: relative;

            border: 1px solid #b9b9b9;

        }

        .item_checkbox label

        {

            display: block;

            width: 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}); 方式进行设置值就好了。

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

        <link rel="stylesheet" href="css/jquery.dialogbox.css" />

     <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

     <script type="text/javascript" src="js/jquery.dialogBox.js" ></script>

     <script type="text/javascript">

          $(function(){

              $(".l-checkbox").click(function(){

                 if($("#box").prop("checked"))

                 {

                     $("input").prop({checked:false});

                 }

                 else{

                     $("input").prop({checked:true});

                 }

              });

          });

     </script>

     <style>

         /**

  * 隐藏默认的checkbox

  */

         input[type=checkbox]

         {

             visibility: hidden;

         }

         .item_checkbox

         {

             margin-top: 30px;

             margin-left: 30px;

             margin-right: 30px;

             width: 30px;

             height: 30px;

             background: #ddd;

             border-radius: 100%;

             position: relative;

             border: 1px solid #b9b9b9;

         }

         .item_checkbox label

         {

             display: block;

             width: 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" name="11" id="box" tag="ceshi"/>

         <label class="l-checkbox">

         </label>

     </div>

     <div >

         <button class="logpwd_show_bt">只能使用1.9以上版本</button>

     </div>

     <div id="simple-dialogBox" class="dialogBox">

      </div>

      <style type="text/css">

          .dialog-box{

              width: 100%;

          }

          .dialog-box-container

          {

              width: 90%;

          }

          .dialog-box-content

          {

              text-align: center;

              background: #84c225;

          }

          .dialog-box-content

          {

              color: #FFFFFF;

              font-size: 0.18rem;

          }

      </style>

     <script type="text/javascript">

         $(function () {

             $('.logpwd_show_bt').click(function(){

                     $('#simple-dialogBox').dialogBox({

                         autoHide: true,

                         time: 2000,

                         hasClose: true,

                         hasMask: true,

                         content: '新密码设置成功'

                     });

                 })

         })

     </script>

 </body>

 </html>

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

jquery不同版本导致的checkbox设置了属性，但是没有选中效果的更多相关文章

  1. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

  2. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  3. Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...

  4. jquery各版本区别

     jquery版本区别:          1.3一般功能够 1.4.2一般功能够而且稳定 1.7+比较新特性 2不支持老IE 兼容的话最好选 1.x.稳定性就用1.7或者1.4,其中1.4的体积相对 ...

  5. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  6. 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  7. jQuery radio取值，checkbox取值，select取值

    语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...

  8. jQuery设置disabled属性

    先比较下readOnly和disabled: readOnly 只针对input(text/ password)和textarea有效: disabled 对于所有的表单元素都有效,包括select, ...

  9. jquery操作select(取值，设置选中）

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

随机推荐

  1. PAT (Basic Level) Practise （中文）- 1010. 一元多项式求导 (25)

    http://www.patest.cn/contests/pat-b-practise/1010 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降 ...

  2. cocos2d-x中的字符串操作

    1:循环体中字符串的构造.      通常用于多个有规律的文件的名字,诸如:[NSString stringWithFormat:@"filed.png",i].我们可以通过spr ...

  3. 【线性基】bzoj2322: [BeiJing2011]梦想封印

    线性基的思维题+图常见套路 Description 渐渐地,Magic Land上的人们对那座岛屿上的各种现象有了深入的了解. 为了分析一种奇特的称为梦想封印(Fantasy Seal)的特技,需要引 ...

  4. Spring Security 与 OAuth2（介绍）

    https://www.jianshu.com/p/68f22f9a00ee Spring Security 与 OAuth2(介绍) 林塬 2018.01.23 11:14* 字数 3097 阅读 ...

  5. tomcat关闭钩子

    转 http://501565246-qq-com.iteye.com/blog/1733575 21,tomcat关闭钩子 博客分类: tomcat   在很多环境下,在关闭应用程序的时候需要做一些 ...

  6. Docker 自动运行Nginx容器

    Dockerfile文件如下: FROM ubuntu #基础镜像 RUN apt-get update #更新apt RUN apt-get -y install nginx #安装nginx VO ...

  7. LeetCode935

    问题:935. 骑士拨号器 国际象棋中的骑士可以按下图所示进行移动:  .            这一次,我们将 “骑士” 放在电话拨号盘的任意数字键(如上图所示)上,接下来,骑士将会跳 N-1 步. ...

  8. 局域网映射到公网-natapp实现

    在开发时可能会有这样的需求: 需要将自己开发的机器上的应用提供到公网上进行访问,但是并不想通过注册域名.搭建服务器等等一系列繁琐的操作来实现. 例如:微信公众号的开发调试就需要用到域名访问本机项目. ...

  9. x200 xp 驱动下载

    http://support.lenovo.com/en_US/downloads/detail.page?&LegacyDocID=MIGR-70602

  10. C++ 虚函数&纯虚函数&抽象类&接口&虚基类(转)

    http://www.cnblogs.com/fly1988happy/archive/2012/09/25/2701237.html 1. 多态 在面向对象语言中,接口的多种不同实现方式即为多态.多 ...