如何实现图片式单选按钮点击切换至下一个fieldset？

我来帮你完成这个需求：将单选按钮以图片形式展示，点击后平滑切换到下一个表单字段集（fieldset）。下面是完整的实现方案，包含结构、样式和交互逻辑：

一、HTML结构 #

我们用<a>作为容器，包裹原生单选框、关联的<label>（承载图片和标题）。点击图片所在的label时，既会触发单选框的选中状态，也会触发字段集切换逻辑：

<a id="Choise" name="next" class="next Choise-button" value="Next" > 
  <input type="radio" name="designation" id="designation" /> 
  <label for="designation">
    <img src="" alt="designation" /> 
    <h2>designation</h2>
  </label> 
</a>

注意：请替换<img>的src属性为你的实际图片地址。

二、CSS样式 #

以下样式负责页面布局、表单美化、隐藏原生单选框，以及按钮的交互效果：

/*自定义字体*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*基础重置*/
* {margin: 0; padding: 0;}
html {
 height: 100%;
 /*仅图片背景降级方案*/
 /*背景=渐变+图片图案组合*/
 background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.6));
}
body {
 font-family: montserrat, arial, verdana;
}
/*表单样式*/
#msform {
 width: 950px;
 margin: 50px auto;
 text-align: center;
 position: relative;
}
#msform fieldset {
 background: white;
 border: 0 none;
 border-radius: 1px;
 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 padding: 40px 40px;
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
 /*字段集堆叠显示*/
 position: relative;
}
/*隐藏除第一个外的所有字段集*/
#msform fieldset:not(:first-of-type) {
 display: none;
}
/*输入框样式*/
#msform input, #msform textarea {
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 15px;
 margin-top: 5px;
 width: 100%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}
#msform select {
 text-align:left;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 15px;
 margin-top: 5px;
 width: 30%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}
/*按钮样式*/
#msform .action-button {
 width: 400px;
 background: #00affe;
 font-weight: bold;
 font-size:16px;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
}
/*选择按钮样式*/
#msform .choise-button {
 cursor: pointer;
}
#msform .choise-button:hover, #msform .choise-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
 border: 10 solid;
 border-color: #FF0000;
}
#msform .Angaben { /*信息*/
 font-size:12px;
 text-align:left;
}
#msform .zustimm { /*同意*/
 /*此处原代码未完成，需补充对应样式*/
}
/*隐藏原生单选框*/
.input_hidden {
 position: absolute;
 left: -9999px;
}
/*单选按钮选中状态样式*/
#Choise label.selected,
#Choise2 label.selected,
#Choise3 label.selected,
#Choise4 label.selected,
#Choise5 label.selected,
#Choise6 label.selected,
#Choise7 label.selected,
#Choise8 label.selected,
#Choise9 label.selected {
 /*可自定义选中后的样式，比如边框、透明度变化*/
 border: 2px solid #00affe;
}

三、jQuery交互逻辑 #

这部分包含两个核心功能：字段集的平滑切换动画，以及图片单选按钮的选中状态管理：

//jQuery 代码段
var current_fs, next_fs, previous_fs; //表单字段集
var left, opacity, scale; //用于动画的字段集属性
var animating; //防止快速多次点击的标记
$(".next").click(function(){
 if(animating) return false;
 animating = true;
 current_fs = $(this).parent();
 next_fs = $(this).parent().next();
 //根据next_fs的索引激活进度条的下一步
 $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 //显示下一个字段集
 next_fs.show();
 //带动画效果隐藏当前字段集
 current_fs.animate({opacity: 0}, {
 step: function(now, mx) {
 //当current_fs的透明度降至0时，当前值存储在"now"
 //1. 将current_fs缩小至80%
 scale = 1 - (1 - now) * 0.2;
 //2. 将next_fs从右侧(50%)移入
 left = (now * 50)+"%";
 //3. 随着移入增加next_fs的透明度至1
 opacity = 1 - now;
 current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' });
 next_fs.css({'left': left, 'opacity': opacity});
 },
 duration: 800,
 complete: function(){
 current_fs.hide();
 animating = false;
 },
 //来自自定义缓动插件
 easing: 'easeInOutBack'
 });
});

//批量处理图片单选按钮的选中状态（优化原重复代码）
$('[id^="Choise"] input:radio').addClass('input_hidden');
$('[id^="Choise"] label').click(function(){
 $(this).addClass('selected').siblings().removeClass('selected');
});

小提示：原代码中重复的9段单选框选中逻辑可以用属性选择器[id^="Choise"]批量处理，减少代码冗余，上面的代码已经做了优化。

内容的提问来源于stack exchange，提问作者New48