美文网首页
jquery单选框

jquery单选框

作者: 可乐_加冰_ | 来源:发表于2019-12-26 11:40 被阅读0次

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

        <link href="https://cdn.bootcss.com/awesome-bootstrap-checkbox/v0.2.3/awesome-bootstrap-checkbox.css"

              rel="stylesheet">

        <style>

            .checkbox label::before {

                content:"";

                display:inline-block;

                position:absolute;

                width:16px;

                height:16px;

                left:0;

                margin-left:-20px;

                border:1px solid #cccccc;

                border-radius:3px;

                background-color:#fff;

                -webkit-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;

                -o-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;

                transition:border 0.15s ease-in-out, color 0.15s ease-in-out;

    }

            .checkbox label::after {

                display:inline-block;

                position:absolute;

                width:18px;

                height:18px;

                left:0;

                top:2px;

                color:white;

                font-size:10px;

                margin-left:-20px;

    }

            .checkbox input[type="checkbox"],

            .checkbox input[type="radio"] {

                opacity:0;

                z-index:1;

    }

            .checkbox input[type="checkbox"]:focus + label::before,

            .checkbox input[type="radio"]:focus + label::before {

                background-color:#5FB878;

                border-color:#5FB878;

    }

            .checkbox input[type="checkbox"]:checked + label::before,

            .checkbox input[type="radio"]:checked + label::before {

                background-color:#5FB878;

                border-color:#5FB878;

    }

            .checkbox input[type="checkbox"]:checked + label::after,

            .checkbox input[type="radio"]:checked + label::after {

                font-family:"FontAwesome";

                content:"\f00c";

    }

            .checkbox input[type="checkbox"]:disabled + label,

            .checkbox input[type="radio"]:disabled + label {

                opacity:0.65;

    }

            .checkbox input[type="checkbox"]:disabled + label::before,

            .checkbox input[type="radio"]:disabled + label::before {

                background-color:#eeeeee;

                cursor:not-allowed;

    }

            .checkbox.checkbox-circle label::before {

                border-radius:50%;

    }

            .radio, .checkbox {

                position:relative;

                display:unset !important;

                margin-top:0px;

                margin-bottom:0px;

    }

        </style>

    </head>

    <body>

    <div class="" style="display:inline-block;margin-top:20px;position:absolute;">

            <span class="checkbox checkbox-circle">

                <input id="radio1" class="styled" type="radio" name="radio" checked="" value="1" autocomplete="off">

                  <label for="radio1" class="font-bolder"> </label>

            </span>

        <span class="checkbox checkbox-circle">

            <input id="radio2" class="styled" type="radio" name="radio" autocomplete="off">

          <label for="radio2" class="font-bolder"></label>

        </span>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script type="text/javascript">

        $('#radio1').click(function () {

            $(this).val('1');

            $('#radio2').val('on');

    });

        $('#radio2').click(function () {

            $(this).val('1');

            $('#radio1').val('on');

    });

    </script>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:jquery单选框

          本文链接:https://www.haomeiwen.com/subject/jxpkoctx.html