JQUERY对复选框(CHECKBOX)的的操作
来源:互联网 发布:手机软件备份的软件 编辑:程序博客网 时间:2024/05/07 07:21
HTML代码:
<body>
<ul id=”list”>
<li><label><input type=”checkbox” name=”items” value=”1″> 1.时间都去哪儿了</label></li>
<li><label><input type=”checkbox” name=”items” value=”2″> 2.海阔天空</label></li>
<li><label><input type=”checkbox” name=”items” value=”3″> 3.真的爱你</label></li>
<li><label><input type=”checkbox” name=”items” value=”4″> 4.不再犹豫</label></li>
<li><label><input type=”checkbox” name=”items” value=”5″> 5.光辉岁月</label></li>
<li><label><input type=”checkbox” name=”items” value=”6″> 6.喜欢妳</label></li>
</ul>
<input type=”checkbox” id=”all”> 全选/全不选</br>
<input type=”button” value=”全选” class=”btn” id=”selectAll”>
<input type=”button” value=”全不选” class=”btn” id=”unSelect”>
<input type=”button” value=”反选” class=”btn” id=”reverse”>
<input type=”button” value=”获得选中的所有值” id=”btn” id=”getValue”>
</body>
jquery代码:
<script type=”text/javascript”>
$(function(){
//全选/全不选
$(“#all”).click(function(){
$(“[name=items]:checkbox”).attr(“checked”,this.checked);
});
$(“[name=items]:checkbox”).click(function(){
var flag=true;
$(“[name=items]:checkbox”).each(function(){
if(!this.checked){
flag=false;
}
});
$(“#all”).attr(“checked”,flag);
})
//全选
$(“#selectAll”).click(function(){
$(“[name=items]:checkbox”).each(function(){
$(this).attr(“checked”,true);
});
});
//全不选
$(“#unSelect”).click(function(){
$(“[name=items]:checkbox”).each(function(){
$(this).attr(“checked”,false);
});
});
//反选
$(“#reverse”).click(function(){
$(“[name=items]:checkbox”).each(function(){ //遍历每一个复选框
//$(this).attr(“checked”,!$(this).attr(“checked”)); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$(“#btn”).click(function(){
var str=”你选中的是:\r\n”;
$(“[name=items]:checkbox:checked”).each(function(){
str+=$(this).val()+”\r\n”;
});
alert(str);
});
})
</script>
注:由于jquery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;
第二种解决方法是把attr换成prop。
- JQUERY对复选框(CHECKBOX)的的操作
- jquery对复选框(checkbox)的操作汇总
- jquery对radio单选框和CheckBox复选框的操作
- jquery操作复选框(checkbox)的方式
- jQuery对复选框(checkbox)的全选,全不选,反选等的操作
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- 【小结】jQuery 对复选框checkbox 值的获取
- jquery实现对复选框的操作
- jQuery 对复选框的操作
- jQuery 操作复选框(checkbox) 真正的方法
- jquery操作复选框(checkbox)的小技巧总结
- jquery操作复选框checkbox
- JQuery checkbox复选框操作
- jquery操作复选框(checkbox)
- jquery操作复选框(checkbox)
- jquery操作复选框checkbox
- jquery操作复选框checkbox
- Jquery操作checkbox复选框
- JS中console操作
- 2016北京赛区网赛C(模拟)
- Linux权限
- Sliverlight的Slider样式--记录
- 插入排序
- JQUERY对复选框(CHECKBOX)的的操作
- 过河
- kafka0.10.0.0版本安装
- 【bzoj4010】 HNOI2015—菜肴制作
- string类为什么不能不继承
- 正则表达式——Python版
- leetcode 51.N-Queens & 52. N-Queens II
- 有return的情况下try catch finally的执行顺序
- 阿里2016前端开发工程师笔试 - 布局之左侧自动宽度右侧固定宽度