jquery中全选全不选,删除checkbox选中的单行或多行数据

    • 1、jquery中全选和全不选
    • 2、 删除checkbox选中的单行或多行数据
      • 方法一 封装成为一个方法,直接调用
      • 方法二

1、jquery中全选和全不选

  • 页面代码
    jquery中全选全不选,删除checkbox选中的单行或多行数据_第1张图片
    • 浏览器效果
      浏览器
    • js代码
$("#selectall").click(function(){
    $("input[type='checkbox']").each( function() {
           if($(this).prop("checked")==true) {
               $("input[type='checkbox']").prop('checked', true);
               return;
           } else {
               $("input[type='checkbox']").prop('checked', false);
               return;
           }
       });
})

2、 删除checkbox选中的单行或多行数据

方法一 封装成为一个方法,直接调用

function GetAllCheckBox(){
    var checkedPids='';
    $(".xhnInp").each(function(index,element){
        if($(this).is(":checked")){
            if(checkedPids.length>0){
                checkedPids += ','
            }
            checkedPids += $(this).attr('id')
        }
    })
    return checkedPids;
}
$("#del").click(function(){
    var checkedres=GetAllCheckBox();
    console.log("checkedres--",checkedres)
    if(checkedres.length<=0){
            layer.msg('还未选择要删除的数据!');
            return;
        }
})

方法二

 //删除操作
    $("#del").click(function () {
        var id_array=new Array();
        var idstr="";
        $("input[name='checkelement']:checked").each(function() { // 遍历选中的checkbox
            var pidSel=$(this).attr("id");
            id_array.push(pidSel);
            idstr=id_array.join(',');
        });
        var deletelength=id_array.length;
        if(deletelength<=0){
            layer.msg('还未选择要删除的数据!');
            return;
        }
        //询问框
        layer.confirm('是否确认删除?', {
            btn: ['确定','取消'] //按钮
        }, function(){//ajax 调用删除方法接口。。。。});
     }

你可能感兴趣的:(前端jquery)