欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery中获取checkbox选中项等操作及注意事项_jquery

程序员文章站 2022-05-23 23:13:31
...
1. 获取checkbox的选中项
2. checkbox选项的全选 反选操作

用于测试的checkbox代码段:

复制代码 代码如下:













一:首先来说第一点,获取checkbox的选中项。网上搜到的大部分方法使用each来获取:

复制代码 代码如下:

$("input[name='checkbox'][checked]").each(function () {
alert(this.value);
})
但在测试时我就遇到了问题,这种方法在IE下可以获取,但在firefox和chrome浏览器下就无法获取当前的选中项,测试效果如下:

IE下的测试效果(我的是IE10):

jQuery中获取checkbox选中项等操作及注意事项_jquery

IE10下的效果:

jQuery中获取checkbox选中项等操作及注意事项_jquery

chrome浏览器下的效果:

jQuery中获取checkbox选中项等操作及注意事项_jquery

通过在google上搜索,找到了原因:

jQuery中获取checkbox选中项等操作及注意事项_jquery

网址: Jquery 选中多少个input CheckBox问题,IE正常,FF和Chrome无法取到值

jQuery中获取checkbox选中项等操作及注意事项_jquery

因为我用的jquery版本是1.7.2的,所以这里我得用 :checked 来获取才行,修改后的代码:

复制代码 代码如下:

//获取选中项
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});

在chrome下的效果:

jQuery中获取checkbox选中项等操作及注意事项_jquery

二:checkbox的全选 反选操作:

由于这两个比较简单,我就直接上代码吧:

复制代码 代码如下:

//全选/取消全选
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});


//反选
$('#fanxuan').click(function () {
$("input[name='abc']").each(function () {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
});

再总结一下:

jquery版本在1.3之前时,获取checkbox的选中项的操作:

复制代码 代码如下:

$("input[name='abc'][checked]").each(function () {
alert(this.value);
});

jquery版本在1.3之后时,获取checkbox的选中项的操作:

复制代码 代码如下:

$("input[name='abc']:checked").each(function () {
alert(this.value);
});

附 完整测试Demo代码:


复制代码 代码如下:





//$("input[name='abc'][checked]").each(function () {
// alert(this.value);
//});

$('#show').html("");
$("input[name='abc'][checked]").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});


//获取选中项
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});


//全选/取消全选
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});


//反选
$('#fanxuan').click(function () {
$("input[name='abc']").each(function () {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
});
});























选中项:







作者:酷小孩