淘先锋技术网

首页 1 2 3 4 5 6 7

在前端开发中经常需要对表格等元素进行数据的全选或全不选的操作。这就需要用到jQuery的点击按钮全选在线操作。

jQuery点击按钮全选在线操作

首先,在HTML代码中需要有一个勾选框和一个全选按钮。


<input type="checkbox" id="checkAll">全选
<button id="btnSelectAll">全选</button>

然后在jQuery中编写点击按钮全选在线操作的代码:


$("#btnSelectAll").click(function(){
    //获取全选按钮状态
    var checkFlag = $("#checkAll").prop("checked");
    //获取表格中所有勾选框
    var checkInput = $("tbody").find(":checkbox");
    //根据全选按钮状态修改所有勾选框状态
    checkInput.prop("checked",checkFlag);
});

这里使用了click事件监听全选按钮的点击操作,然后获取全选按钮状态和表格中所有勾选框,最后根据全选按钮状态修改所有勾选框状态。

通过这样的简单代码实现点击按钮全部勾选的功能,简单易懂,方便实用。