jquery实现全选反选功能

最新推荐文章于 2021-05-26 21:46:19 发布

Zhang_xiao_pang

最新推荐文章于 2021-05-26 21:46:19 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/Zhang_xiao_pang/article/details/102469172

版权

如何利用jquery是先简单的全选反选功能
首先我们需要载页面中引入jQuery

    <script src="jquery-3.4.1.min.js"></script>

然后我们需要引入input标签

<body>
        全选<input type="checkbox" id="checkAll">
		反选<input type="checkbox" id="checkOther">
		<ul>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
		</ul>
</body>

然后我们接下来用书写js代码

 $(function(){

        $("#checkAll").click(function(){
            $("li").find("input").prop("checked",$(this).prop("checked"))
        })
        //单选
        $("li input").click(function(){
            if($('li input:checked').length==$('li input').length){
                $("#checkAll").prop("checked",true)
            }else{
                $('#checkAll').prop("checked",false)
            }
        })
        //反选
        $("#checkOther").click(function(){
            $('li input').map(function(){
                $(this).prop("checked",!$(this).prop("checked"))
            })
        })
    })