在jquery用一个按钮实现全选/全不选的效果(attr和prop的区别使用)
2016-11-26 09:19
696 查看
<html>
<head>
<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
<meta charset="utf-8"/>
<script type="text/javascript">
var i=0;
$(function(){
$("#ss").click(
function (){
$("input[name='fav']").prop("checked","checked");
//这个地方只能用prop实现多次点击切换全选和全不选的效果,用attr的话不会多次实现。因为attr不会记录当前checkbox的选中状态,所以这个地方只能使用prop
if(i==1){
$("input[name='fav']").prop("checked",false);
}
i++;
if(i>1){
i=0;
}
}
);
}
);
</script>
</head>
<body>
<input type="checkbox" name="fav" value="ds"/>读书<br/>
<input type="checkbox" name="fav" value="ds"/>思考<br/>
<input type="checkbox" name="fav" value="ds"/>思考<br/>
<input type="checkbox" name="fav" value="ds"/>睡觉<br/>
<button id="ss">全选</button>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
<meta charset="utf-8"/>
<script type="text/javascript">
var i=0;
$(function(){
$("#ss").click(
function (){
$("input[name='fav']").prop("checked","checked");
//这个地方只能用prop实现多次点击切换全选和全不选的效果,用attr的话不会多次实现。因为attr不会记录当前checkbox的选中状态,所以这个地方只能使用prop
if(i==1){
$("input[name='fav']").prop("checked",false);
}
i++;
if(i>1){
i=0;
}
}
);
}
);
</script>
</head>
<body>
<input type="checkbox" name="fav" value="ds"/>读书<br/>
<input type="checkbox" name="fav" value="ds"/>思考<br/>
<input type="checkbox" name="fav" value="ds"/>思考<br/>
<input type="checkbox" name="fav" value="ds"/>睡觉<br/>
<button id="ss">全选</button>
</body>
</html>
相关文章推荐
- jquery中attr和prop的区别+jquery实现全选全不选
- jQuery 实现单选按钮(radio)勾选和取消,使用prop()代替attr() 踩坑博客
- Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- jQuery .attr() .prop() .data()区别及全选等问题
- 用jquery实现全选/全部选功能(jquery-1.9.x 版本以上),使用 prop 属性
- 新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败attr与prop区别
- jQuery使用一个按钮控制图片的伸缩实现思路
- jquery中attr() & prop() 的区别与其实现方法
- jquery中attr() & prop() 的区别与其实现方法
- jQuery .attr() .prop() .data()区别及全选等问题
- jquery中attr()和prop()的使用区别
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- 使用jQuery实现类似开关按钮的效果
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- jquery中radio,CheckBox使用attr和prop的区别
- jquery 选中 全选 反选 checked(请使用prop,用attr有bug)
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- JQuery全选Prop(“check”,true)和attr("attr",true)区别