单选框实现全选，反选，查找

Html

Css

姓名	昵称	性别	爱好
刘备	小刘	男	撩妹，装逼，编草鞋
关羽	关二	男	耍大刀，变脸，喝酒
张飞	张三	男	打架，喝酒，耍流氓
赵云	赵四	男	打架，喝酒，耍帅
貂蝉	美女	女	撩汉，化妆
小乔	乔二	女	弹琴，唱歌，撩周瑜

.datalist {
	border:1px solid #ccc;
	border-collapse:collapse;
	width:100%;
}
.datalist thead tr {
	background-color:#dfdfdf;
}
td,th {
	border:1px solid #ccc;
	padding:5px 10px;
}
.odd {
	background-color:#efefef;
}
.selected {
	background-color:#fc0;
	color:#fff;
}

$(function() {
    //点击tr 背景改变  并改变对应的checkbox的状态
    $('tbody tr').click(function() {
        console.log('click');
        console.log(this);
        $(this).toggleClass('selected');
        //通过样式判断是否有勾选
        $(this).find(':checkbox').prop('checked', $(this).hasClass('selected'));
        allPD()
    })

//全选按钮
    $('#all').click(function() {
        console.log($(this).prop('checked'));
        var bAll = $(this).prop('checked');
        if (bAll) {
            //全选
            $('tbody tr').addClass('selected');
            $('tbody :checkbox').prop('checked', true);
        } else {
            //全不选
            $('tbody tr').removeClass('selected');
            $('tbody :checkbox').prop('checked', false);
        }
    })
    //反选
    $('#btnFx').click(function() {
        $('tbody tr').toggleClass('selected');
        $('tbody :checkbox').each(function() {
            //this 遍历的checkbox js
            //通过父节点的父节点 找到tr
            console.log($(this).parent().parent().hasClass('selected')) //true  false
            $(this).prop('checked', $(this).parent().parent().hasClass('selected'))
        })
        allPD()
    })

//查找功能
    $('button').eq(-2).click(function() {
        //获取输入框的内容
        var name = $('#username').val();
        if (name == "") {
            console.log("输入错误");
        } else {
            //清除原来的状态
            $('tbody tr').removeClass('selected');
            $('tbody :checkbox').prop('checked', false);
            //匹配对应的td
            var $td = $('tbody td:contains(' + name + ')')
            //通过td找到对应的tr
            $td.parent().addClass('selected').find(':checkbox').prop('checked', true);
        }
        allPD()
    })

//全选状态的修改
    function allPD() {
        //tr的数量 或者是checkbox的数量
        var checkboxLen = $('tbody :checkbox').length;
        //所有被勾选的checkbox的数量
        var checkedLen = $('tbody :checked').length;
        if (checkboxLen == checkedLen) {
            $('#all').prop('checked', true);
        } else {
            $('#all').prop('checked', false);
        }
    }
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

单选框实现全选，反选，查找



代码描述：单选框实现全选，反选，查找

1

最新

发表评论全部评论

暂时没有评论！

wang198901220

2017/7/7 10:53:28

有空格就不能查找
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

忍忍会更好

相关代码

单选框实现全选，反选，查找

最新