博主信息
樂成的博客
博文
41
粉絲
7
評論
10
訪問量
33850
積分:0
P豆:595.5

復選框變圓樣式以及單選全選反選

2020年01月13日 16:38:01閱讀數:662博客 / 樂成的博客 / 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樓
  • 不錯的樣本

  • 回復
  • 3d试机号绕胆图