复选框变圆样式以及单选全选反选 - HTML+CSS

首页 > 博客列表 > 复选框变圆样式以及单选全选反选

博主信息

博文 57

粉丝 7

访问量 261001

专题推荐

更多>

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>复选框</title>

    <style type="text/css">
        .tui-checkbox:checked {
			background:#1673ff
		}
		.tui-checkbox {
			width:25px;
			height:25px;
			background-color:#ffffff;
			border:solid 1px #dddddd;
			-webkit-border-radius:50%;
			border-radius:50%;
			font-size:0.8rem;
			margin:0;
			padding:0;
			position:relative;
			display:inline-block;
			vertical-align:top;
			cursor:default;
			-webkit-appearance:none;
			-webkit-user-select:none;
			user-select:none;
			-webkit-transition:background-color ease 0.1s;
			transition:background-color ease 0.1s;
		}
		.tui-checkbox:checked::after {
			content:'';
			top:5px;
			left:5px;
			position:absolute;
			background:transparent;
			border:#fff solid 2px;
			border-top:none;
			border-right:none;
			height:6px;
			width:10px;
			-moz-transform:rotate(-45deg);
			-ms-transform:rotate(-45deg);
			-webkit-transform:rotate(-45deg);
			transform:rotate(-45deg);
		}	
    </style>
</head>

<body>
    <input type="checkbox" id="boxid" onclick="setAllNo()" class="tui-checkbox" />全选/全不选
    <br />
    <input type="checkbox" name="love" class="tui-checkbox" />篮球
    <br />
    <input type="checkbox" name="love" class="tui-checkbox" />排球
    <br />
    <input type="checkbox" name="love" class="tui-checkbox" />羽毛球
    <br />
    <input type="checkbox" name="love" class="tui-checkbox" />乒乓球
    <br />
    <input type="button" value="全选" onclick="setAll()" />
    <input type="button" value="全不选" onclick="setNo()" />
    <input type="button" value="反选" onclick="setOthers()" />

    <script type="text/javascript">
        //全选函数
        function setAll() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = true;
            }
        }

        //全不选函数
        function setNo() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = false;
            }
        }

        //反选
        function setOthers() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                if (loves[i].checked == false)
                    loves[i].checked = true;
                else
                    loves[i].checked = false;
            }
        }
        
        //全选/全不选操作
        function setAllNo(){
            var box = document.getElementById("boxid");
            var loves = document.getElementsByName("love");
            if(box.checked == false){
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = false;
                }
            }else{
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = true;
                    }
            }
        }
    </script>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例