JS 性别选择

最新推荐文章于 2023-05-26 09:35:49 发布

diebaiying3731

最新推荐文章于 2023-05-26 09:35:49 发布

阅读量2.4k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghuali/p/6343393.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <style type="text/css">
        *{ margin: 0; padding: 0; }
        body{ max-width: 640px; margin: 0 auto; }
        ul,li{list-style: none;}
        .sex{ overflow: hidden; }
        .sex span{ display: inline-block; }
        .sex i {
            display: block;
            float: left;
            width: 14px;
            height: 14px;
            border: 2px solid #9b6820;
            background-color: #fff;
            border-radius: 50%;
            -o-border-radius: 50%;
            -ms-border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
        }
        .sex span.cur i {background: #9b6820 }
    </style>
</head>
<body>
<form>
    <div class="sex J_sex">
        <span class="cur" data-value="1"><i></i><font>男</font></span>
        <span data-value="0"><i></i><font>女</font></span>
        <input type="hidden" name="gender" value="0" />
    </div>  
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    // 性别选择
    //第一种
    var sexCheckbox=$('.J_sex');
    if(sexCheckbox.length){
        sexCheckbox.children('span').on('click', function () {
            $(this).addClass('cur');
            $(this).siblings('span').removeClass('cur');
            var value = $(this).data('value');
            $(this).parent().find('input').val(value);
        });
    }
    //第二种
    // $('.sex span').on('click', function () {
    //     $(this).addClass('cur');
    //     $(this).siblings('span').removeClass('cur');
    //     var value = $(this).data('value');
    //     $(this).parent().find('input').val(value);
    // });

</script>


</body>
</html>

　　效果如图：

转载于:https://www.cnblogs.com/huanghuali/p/6343393.html

diebaiying3731

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 性别选择

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫

JS 性别选择

“相关推荐”对你有帮助么？