手机里的闹钟设置时会让选择具体在星期几工作，选择的方式因机而异，今天要聊的是手机提供七个点，点亮你需要的时间。如果用前端的方法实现，怎么做简洁，如何对复选框变形，看了很多别人的demo，都没有达到我的预期，我需要将选项内容作为点选的按钮，这就需要让两者“合二为一”，内容的样式随着checkbox的状态改变，这里应该有思路了。

页面框架

对列表稍加修改，li元素横向排列，列表中加入checkbox以及label，出来的效果就是最常见的复选框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ul class="day-select">
    <li>    
        <input name="box" type="checkbox" id="sun"  />
        <label for="sun">日</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="mon"  />
        <label for="mon">一</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="tue"  />
        <label for="tue">二</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="wed"  />
        <label for="wed">三</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="thu"  />
        <label for="thu">四</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="fri"  />
        <label for="fri">五</label>
    </li>
    <li>    
        <input name="box" type="checkbox" id="sat"  />
        <label for="sat">六</label>
    </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
html{
    font-size: 16px;
    font-family: 微软雅黑;
}
.day-select{
    font-size: 1rem;
    margin-left: 4rem;
}
.day-select li{
    list-style: none;
    float: left;
    margin-right: 2rem;
}

出来的效果

复选框整容

消除checkbox默认样式

checkbox在浏览器的默认样式对我们会造成干扰，所以首先就是去除checkbox默认样式。
这里需要用到CSS3中的appearance属性，通过赋值none去除默认样式。

1
2
3
4
5
input[type="checkbox"]{
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

这样看起来就清爽很多的嘛

添加按钮样式

在checkbox状态改变时，改变label样式，这里我在checkbox状态为checked时给label外加一圆边，没选定时，不设样式。
这里需要用到CSS选择器的兄弟节点，input和label是相邻的兄弟元素，用+连接。
注：因为字体长宽不等，我加了padding进行调整，使出来的圆效果更好些。

1
2
3
4
5
6
7
input[type="checkbox"]:checked + label ,
input[type="checkbox"]:active + label {
    border: 3px solid #EEE;
    border-radius: 50%;
    padding: 5px 10px;
    border-color: #2AC9DE;
}

很好，现在预想的效果已经出来了

只不过因为padding变化，元素之间会挤压，可以在元素未选定时将边框画好，颜色设为背景色，选定时只需要更改边框颜色，如下。

1
2
3
4
5
6
7
8
9
input[type="checkbox"] + label {
    border: 3px solid #EEE;
    border-radius: 50%;
    padding: 5px 10px;
}
input[type="checkbox"]:checked + label ,
input[type="checkbox"]:active + label {
    border-color: #2AC9DE;
}

完工！

详情显示

上一幅图中，点选日期，页面会出现相应的日期，这个也很简单，预设一个日期详情列表，并且设置为不可见，jquery监听所有的checkbox状态，给相应的详情设置为可见，完工。
html

1
2
3
4
5
6
7
8
9
<ul class="day-info" id="dayInfo">
    <li>周日</li>
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    <li>周四</li>
    <li>周五</li>
    <li>周六</li>
</ul>

css

1
2
3
4
5
6
7
8
9
10
.day-info{
    font-size: .8rem;
    margin-left: 8rem;
}
.day-info li{
    list-style: none;
    float: left;
    margin-right: 2rem;
    visibility:hidden;
}

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
$('input[name^="box"]').click(function(){
    var checklist=document.getElementsByName("box");
    console.log(checklist);
    var infolist=document.getElementById("dayInfo").children;
    console.log(infolist);
    for(var i=0;i<checklist.length;i++){
        if(checklist[i].checked==true){
            infolist[i].style.visibility="visible";
        }else{
            infolist[i].style.visibility="hidden";
        }
    }
});

参考: