jquery复选框 选中事件 及其判断是否被选中_常用笔记
checkbox的change事件可监听是否选中状态,也可添加onclick事件。
var dom=$('.checkbox');
1. 判断checkbox是否被选中
var dom=$('.checkbox');
dom.prop('checked');
//实现控制checkbox是否选中状态: 切换到初始状态
if (!(dom.prop('checked'))) {
dom.prop('checked',!(dom.prop('checked')));
dom.prop('checked',dom.prop('checked'));
}else{
dom.prop('checked',dom.prop('checked'));
dom.prop('checked',!(dom.prop('checked')));
}
2. 判断checkbox是否被选中
dom.is(':checked')
3. 设置是否选中状态
dom.prop('checked',true);
dom.prop('checked',false);
//全选按钮
$(document).on('click', 'th input:checkbox', function () {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function () {
this.checked = that.checked;
//$(this).closest('tr').toggleClass('selected');
});
});
/**
* 获取选中的CheckBox值
* @param Domid 包含checkBox元素的容器id
* @param delimiters 值的分隔符如:'|',','
* @returns {string} 返回字符串
*/
bingjs.get_checkbox_value = function (Domid, delimiters) {
var Id_string = '';//选中的值
$('#' + Domid).find('tr > td:first-child input:checkbox')
.each(function () {
//this与$(this)的区别 一个是dom一个是jquery对象
if (this.checked == true) {
Id_string += $(this).val() + delimiters;
}
});
//console.info(Id_string.indexOf(delimiters));
//console.info(Id_string);
if (Id_string.lastIndexOf(delimiters)) {
Id_string = Id_string.substr(0, Id_string.length - 1);
}
return Id_string;
}
1.通过 attr('checked','checked') 来设置checkbox时,重复点击,虽然checked属性设置正确,但是checkbox没有被勾选 ,如下代码:(代码是全选功能)
$('#ckAll').click(function(){
if($('#ckAll ').attr('checked') == 'checked'){
$('#ckAll').removeAttr('checked');
}else{
$('#ckAll').attr('checked','checked');
}
if($('#ckAll').attr('checked') == 'checked'){
$('.tab-list .ckbox').each(function(i,n){
$(n).attr('checked','checked');
});
}else{
$('.tab-list .ckbox').each(function(i,n){
$(n).removeAttr('checked');
});
}
});
2. 换成 prop('checked',true) ,当ckAll被选中时,所有列表checkbox都会被选中
$('#ckAll').click(function(){
if($('#ckAll').prop('checked')){
$('.tab-list .ckbox').each(function(i,n){
$(n).prop('checked',true);
});
}else{
$('.tab-list .ckbox').each(function(i,n){
$(n).prop('checked',false);
});
}
});
相关文章
- 查看jQuery file upload的image preview如何工作的
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- jQuery中实现自己定义方法的扩展
- 页面有多个相同的id或者class时,绑定jquery事件无效,解决方案
- jquery如何实现自动打开第一个链接!(实例代码)
- 猴子也能学会的jQuery第六期——jQuery事件(下)
- 猴子也能学会的jQuery第六期——jQuery事件(中)
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 1.4 总结
- 26个Jquery使用小技巧
- jQuery Mobile方向感应事件
- jquery-lazyload延迟加载图片 及 加载顺序 bug 修复
- 《众妙之门——JavaScript与jQuery技术精粹》——1.7 与后台交互
- 《jQuery与JavaScript入门经典》——1.2 为编写jQuery和JavaScript做准备
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2 技巧:使用自动补全微件提示输入值
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.11 技巧:在页面下方添加footer
- jquery easyui textbox onblur事件,textbox blur事件无效解决方案
- jquery触发点击事件
- Jquery为动态添加的未来元素绑定事件
- jquery工具
- js和jquery判断事件流
- JQuery事件绑定bind、live、on、trigger
- 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)