博主信息
樂成的博客
博文
38
粉丝
7
评论
10
访问量
29435
积分:0
P豆:589

复选框变圆样式以及单选全选反选

2020年01月13日 16:38:01阅读数:545博客 / 樂成的博客 / HTML+CSS

复选框变圆样式以及单选全选反选

实例

<!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>

运行实例 »

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

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
朱华东✨
  • 朱华东✨· 2020-02-12 16:40:161楼
  • 不错的样本

  • 回复
  • 页面底部区域 foot.htm