<!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- 640px; margin: 0 auto; }
ul,li{list-style: none;}
.sex{ overflow: hidden; }
.sex span{ display: inline-block; }
.sex i {
display: block;
float: left;
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>
效果如图：
