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;
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设置了属性，但是没有选中效果的更多相关文章
- checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...
- jquery各版本区别
jquery版本区别: 1.3一般功能够 1.4.2一般功能够而且稳定 1.7+比较新特性 2不支持老IE 兼容的话最好选 1.x.稳定性就用1.7或者1.4,其中1.4的体积相对 ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...
- jQuery radio取值，checkbox取值，select取值
语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...
- jQuery设置disabled属性
先比较下readOnly和disabled: readOnly 只针对input(text/ password)和textarea有效: disabled 对于所有的表单元素都有效,包括select, ...
- jquery操作select(取值，设置选中）
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
随机推荐
- Asp.Net Core 进阶（四）—— 过滤器 Filters
一.介绍 Asp.Net Core Filter 使得可以在请求处理管道的特定阶段的前后执行代码,我们可以创建自定义的 filter 用于处理横切关注点. 横切关注点的示例包括错误处理.缓存.配置.授 ...
- HTML_6 (表单应用)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python——基本运算符
计算机不止可以进行加减乘除,还可以进行多种运算,比如算数运算,逻辑运算,赋值运算等 算数运算 以下假设变量:a=10,b=20 比较运算 以下假设变量:a=10,b=20 赋值运算 以下假设变量:a= ...
- 【转】LDA-linear discriminant analysis
分类问题也可以用降维来理解,比如一个D维的数据点x,我们可以采用下面的映射进行线性的降维, y=θTx 在计算出y后,就可以选择一个阈值h,来进行分类.正如我们在前面的PCA模型中看到的,降维会有信息 ...
- C/C++字符串笔试知识点及实例
一.C字符串与C++字符串的深入理解 对于C语言,需要区分C字符串和C字符数组. C字符串:以字符NULL('\0')结尾的字符数组: C字符数组:数组元素类型为字符类型. C字符串的的初始化:c ...
- luogu4608 [FJOI2016]所有公共子序列问题
题目描述: luogu loj 题解: 序列自动机(?)+高精+普及dp. 这个是猫老师的序列自动机(字符串从1开始): ]) { memset(t[n],-,sizeof(t[n])); ;i> ...
- 跟踪路由 tracert
由于最近遇到网络出现故障的问题,便使用到Tracert来确定了下出现故障的网络节点 记录下tracert命令相关内容 1. 简介 2. Tracert工作原理... 3. 常用参数 4. 使用示例与输 ...
- python能干什么？
python能干什么? 网络爬虫 爬虫,指的是从互联网采集数据的程序脚本 . 爬天爬地爬空气 ,无聊的时候爬一爬吃鸡数据.b站评论,能得出很多有意思的结论.知乎有个很有意思的问题——"利用爬 ...
- B - CD UVA - 624
https://cn.vjudge.net/contest/224070#problem/B #include <iostream> #include <cstring> #i ...
- python format 用法详解
format 用法详解 不需要理会数据类型的问题,在%方法中%s只能替代字符串类型 单个参数可以多次输出,参数顺序可以不相同 填充方式十分灵活,对齐方式十分强大 官方推荐用的方式,%方式将会在后面的版 ...