修改radio，checkbox默认样式

目录

• radio
  •  设置选中
• checkbox
  • 获取值，设置值

 

回到顶部

radio

 <input class="radio_type" type="radio" name="type" id="radio1" checked="checked" />
                                        <label for="radio1">radio1</label>
                                        <input class="radio_type" type="radio" name="type" id="radio2" />
                                        <label for="radio2">radio2</label>

 label {
            line-height: 20px;
            display: inline-block;
            margin-left: 5px;
            margin-right: 15px;
            color: #777;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }

            .radio_type:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 1px solid #7d7d7d;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 1px solid rgb(117,94,143);
                background: rgb(117,94,143);
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:after {
                content: '';
                width: 10px;
                height: 5px;
                border: 2px solid white;
                border-top: transparent;
                border-right: transparent;
                text-align: center;
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                vertical-align: middle;
                transform: rotate(-45deg);
            }

 设置选中

$("#result_fall").prop("checked", true)

回到顶部

checkbox

 

  <div style="height: 34px; padding-top: 7px; ">
                                                                             <label for="visibleLight">
                                                                                 <input type="checkbox" name="ImageOutput" value="visibleLight" id="visibleLight" checked>
                                                                                 <span class="checkbtn"></span>
                                                                                 <span class="checkboxLabel">可见光</span>
                                                                             </label>
                                                                             <label for="sticksPeople">
                                                                                 <input type="checkbox" name="ImageOutput" value="sticksPeople" id="sticksPeople">
                                                                                 <span class="checkbtn"></span>
                                                                                 <span class="checkboxLabel">火柴人</span>
                                                                             </label>
                                                                         </div>

 @*复选框*@
        input[type="checkbox"] {
            display: none;
        }

        .checkbtn {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            position: relative;
        }

        input[type="checkbox"]:checked + span {
            background-color: rgb(117,94,144);
            border-color: rgb(117,94,144);
        }

        .checkbtn::after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            vertical-align: middle;
            transform: rotate(-45deg);
        }
        .checkboxLabel {
            font-size: 14px;
            font-weight: normal;
            vertical-align: top;
        }

        @*input[type="checkbox"]:checked + span::after {
            transform: rotate(45deg) scaleY(1);
        }*@
@*复选框*@

获取值，设置值

 $("#visibleLight").prop("checked", true)
 $("[name='ImageOutput']").prop("checked", false)