优秀前端工程师必备:" checkbox & radio--单钩 & 多钩 "大比较

1 单选: type="radio" 

 

需求: 男女input只能选择一个

<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女"  >女

 

2 多选: type="checkbox" 

<input type="checkbox" title="吃饭" >吃饭
<input type="checkbox" title="睡觉" >睡觉
<input type="checkbox" title="打豆豆">打豆豆

 

3 自定义勾选图片的input:

需求: 勾选时, 自定义勾选图片且单独勾选

h5:
<span class="cheSpan">
   <input type="radio" class="check" id="aaa" name="card">
   <label for="aaa"></label>
</span>

css 
.cheSpan {
            position: relative;
            margin-right: 37px;
          }

          .cheSpan .check {
            position: absolute;
             16px;
            height: 16px;
            visibility: hidden;
          }

          .cheSpan .check+label {
            display: inline-block;
             16px;
            height: 16px;
            background: url("../images/emptyPoint.png") no-repeat center center;
            border: 1px solid #898989;
            border-radius: 50%;
            margin-bottom: -3px;
            cursor: pointer;
          }

          .cheSpan .check:checked+label {
            background: url("../images/clickPoint.png") no-repeat center center;
            background-size: 16px 16px;
          }

 

转载请注明出处:https://www.cnblogs.com/autoXingJY/p/10495759.html