jq实现几种简单的按钮全选单选

最新推荐文章于 2024-06-20 15:11:50 发布

l_set_Sail

最新推荐文章于 2024-06-20 15:11:50 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签：单选多选按钮按钮单选按钮最基础的

本文链接：https://blog.csdn.net/l_set_Sail/article/details/90678862

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码说明：当你点击前三个按钮中的任何一个的时候都会全选
或者把123456按钮都点中的时候也会全选
此代码可实现单选全选和全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		
	</head>
	<body>

		<input class="j-check g-check d-button" type="checkbox">
		<input class="j-check g-check d-button" type="checkbox">
		<input class="j-check g-check d-button" type="checkbox">
		<input class="j-check g-check d-button" type="checkbox">
		<input class="d-button d-btn" type="checkbox">1
		<input class="d-button d-btn" type="checkbox">2
		<input class="d-button d-btn" type="checkbox">3
		<input class="d-button d-btn" type="checkbox">4
		<input class="d-button d-btn" type="checkbox">5
		<input class="d-button d-btn" type="checkbox">6
		<script type="text/javascript" src="../../louti/jquery-1.11.0.js"></script>
		
		
		<script type="text/javascript">
			 ;(function($){
        $('.g-check').click(function(){
            if($(this).is(':checked')){
                $('.d-button').prop('checked',true)
            }else{
                $('.d-button').prop('checked',false)
            }
        })
          /* 单选按钮 */
            $(".d-btn").click(function(){
                let len = $('.d-btn').length;
                let length = $('.d-btn:checked').length;
                if(len == length){
                    $(".g-check").prop("checked",true)
                }else{
                    $(".g-check").prop("checked",false)
                }
            })
    })(jQuery)
		</script>
	</body>
</html>