jquery css3问卷调查选择题表单代码

一款jquery css3问卷调查选择题表单代码，单选的答案有不同的样式变化，最后的提交按钮能弹出所有选中的结果，暂时以数字的方式显示，很方便数据的传递，可以借鉴学习一下，喜欢的童鞋请收下吧。

分类：表单代码 > 复选框难易：初级

查看演示下载资源下载积分： 30 积分

页面的head部分先要引入jQuery库，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>

接着设置好页面各元素的样式，注意按钮选中状态和未选状态的区别，代码如下：

html, body {
  min-height: 100%;
}

body {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  background: #42426b;
  background-image: -webkit-linear-gradient(135deg, #8067B7, #EC87C0);
  background-image: linear-gradient(-45deg, #8067B7, #EC87C0);
  color: rgba(255,255,255,.5);
}

.rb-box {
  width: 80%;
  max-width: 420px;
  margin: 50px auto;
  padding: 1.3em;
  background: #333368;
  border-radius: .75em;
  -webkit-filter: drop-shadow(1px 2px 5px rgba(0,0,0,.3));
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,.3));
  box-shadow: 0 2px 2px rgba(243,49,128,.5), 0 0px 5px rgba(243,49,128,.15), 0 0px 4px rgba(0,0,0,.35), 0 5px 10px rgba(243,49,128,.25), 0 8px 20px rgba(243,49,128,.35), inset 0 0 15px rgba(255,255,255,.05);
}

/* Custom Radio Button */
p {
  font-size: .9em;
}

.rb {
  padding: 16px 0;
  text-align: center;
  background: rgba(255,255,255,.03);
  border-radius: .3em;
}

.rb-tab {
  display: inline-block;
  position: relative;
  width: 20%;
}

.rb-txt {
  line-height: 38px;
  transform: translate(-50%, -50%);
  font-size: .88em;
  color: #FFFFFF;
}

.rb-spot {
  position: absolute;
  width: 38px;
  height: 38px;
  margin-top: -6px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 1px dashed rgba(255,255,255,.38);
  border-radius: 100%;
  cursor: pointer;
  transition: ease .5s;
}

.rb-tab-active .rb-spot {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,18,118,0.88);
}

/* Submit Button */
.button-box {
  padding: 10px 0;
  text-align: center;
}

button {
  display: inline-block;
  width: 80%;
  margin-top: 1.2em;
  padding: 1em;
  max-width: 220px;
  font-size: .9em;
  color: #D42D78;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .15em;
  background: white;
  border: none;
  outline: none;
  border-radius: 5em;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.3);
  transition: 
    color 0.6s, 
    box-shadow 0.3s, 
    transform 0.3s;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 3px 5px -5px rgba(0, 0, 0, 0.3);
  color: #ff0088;
  font-weight: 600;
}

页面的body部分先设置好每道问题的容器，这里的p标签用来放问题，下面的div用来放待选答案，部分代码如下：

<p>3. 这个秘密就是吸引力定律。</p>
  <div id="rb-3" class="rb">
    <div class="rb-tab" data-value="1">
      <div class="rb-spot">
        <span class="rb-txt">健康</span>
      </div>
    </div><div class="rb-tab" data-value="2">
      <div class="rb-spot">
        <span class="rb-txt">快乐</span>
      </div>
    </div><div class="rb-tab rb-tab-active" data-value="3">
      <div class="rb-spot">
        <span class="rb-txt">财富</span>
      </div>
    </div><div class="rb-tab" data-value="4">
      <div class="rb-spot">
        <span class="rb-txt">幸福</span>
      </div>
    </div><div class="rb-tab" data-value="5">
      <div class="rb-spot">
        <span class="rb-txt">美满</span>
      </div>
    </div>
  </div>

页面的底部需要对点击事件等作出响应，代码如下：

var survey = []; //Bidimensional array: [ [1,3], [2,4] ]

//switcher function:
$(".rb-tab").click(function(){
  //Spot switcher:
  $(this).parent().find(".rb-tab").removeClass("rb-tab-active");
  $(this).addClass("rb-tab-active");
});

//Save data:
$(".trigger").click(function(){
  //Empty array:
  survey = [];
  //Push data:
  for (i=1; i<=$(".rb").length; i++) {
    var rb = "rb" + i;
    var rbValue = parseInt($("#rb-"+i).find(".rb-tab-active").attr("data-value"));
    //Bidimensional array push:
    survey.push([i, rbValue]); //Bidimensional array: [ [1,3], [2,4] ]
  };
  //Debug:
  debug();
});

//Debug:
function debug(){
  var debug = "";
  for (i=0; i<survey.length; i++) {
    debug += "No " + survey[i][0] + " = " + survey[i][1] + "\n";
  };
  alert(debug);
};