jquery实现全选 反选功能

如何利用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"))
            })
        })
    })

这样简单的效果已经实现

你可能感兴趣的:(jquery实现全选 反选功能)