jquery实现全选、反选、获得所有选中的checkbox

245
2023/8/11 14:00:53
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要使用jQuery实现全选、反选和获取所有选中的复选框,可以按照以下步骤进行操作。

首先,确保在页面中引入了jQuery库文件。

1、全选功能:

为了实现全选功能,您需要给一个特定的复选框或按钮添加点击事件处理程序来选择所有的复选框。例如,假设您有一个id为"checkAll"的复选框作为全选按钮:

$("#checkAll").click(function() {

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

});

上述代码将根据全选按钮的选中状态来选择或取消选择所有的复选框。

2、反选功能:

为了实现反选功能,您需要给一个特定的复选框或按钮添加点击事件处理程序来切换所有复选框的选中状态。例如,假设您有一个id为"invertSelection"的复选框作为反选按钮:

$("#invertSelection").click(function() {

    $('input[type="checkbox"]').each(function() {

        $(this).prop("checked", !$(this).prop("checked"));

    });

});

上述代码将迭代所有的复选框并将其选中状态取反。

3、获取所有选中的复选框:

为了获取所有选中的复选框,您可以使用 :checked 选择器来选择所有选中的复选框,并使用each()方法迭代它们。例如:

var selectedCheckboxes = [];

$('input[type="checkbox"]:checked').each(function(){

    selectedCheckboxes.push($(this).val());

});

上述代码将把所有选中的复选框的值存储在selectedCheckboxes数组中。

请根据您的具体需求修改选择器和事件处理程序中的选择器,以适应您的页面结构和元素命名。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: JQuery中Ajax的操作完整例子