jQuery单项选择题问卷调查表单

1、新建html文档。

2、书写hmtl代码。

<div class="rb-box"> 

  1. On a scale of 1 to 5 how cubic are you?

  <div id="rb-1" class="rb">

    <div class="rb-tab rb-tab-active" data-value="1">

      <div class="rb-spot"> <span class="rb-txt">1</span> </div>

    </div>

    <div class="rb-tab" data-value="2">

      <div class="rb-spot"> <span class="rb-txt">2</span> </div>

    </div>

    <div class="rb-tab" data-value="3">

      <div class="rb-spot"> <span class="rb-txt">3</span> </div>

    </div>

    <div class="rb-tab" data-value="4">

      <div class="rb-spot"> <span class="rb-txt">4</span> </div>

    </div>

    <div class="rb-tab" data-value="5">

      <div class="rb-spot"> <span class="rb-txt">5</span> </div>

    </div>

  </div></div>

3、书写css代码。

<style>

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

body { font-family: 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: #292942; 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 20px rgba(243,49,128,.25),  0 15px 50px rgba(243,49,128,.75),  inset 0 0 15px rgba(255,255,255,.05); }

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 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .5em; color: #FFFFFF; }

.rb-spot { position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: 2px solid rgba(255,255,255,.3); border-radius: 100%; cursor: pointer; transition: ease .5s; }

.rb-tab-active .rb-spot { background: rgba(0,0,0,.35); border: 2px solid rgba(243,49,128,.6); }

.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: #6f6f6f; }

</style>

4、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script>

var survey = [];

$(".rb-tab").click(function(){

  $(this).parent().find(".rb-tab").removeClass("rb-tab-active");

  $(this).addClass("rb-tab-active");

});

$(".trigger").click(function(){

  survey = [];

  for (i=1; i<=$(".rb").length; i++) {

    var rb = "rb" + i;

    var rbValue = parseInt($("#rb-"+i).find(".rb-tab-active").attr("data-value"));

    survey.push([i, rbValue]);

  };

  debug();

});

function debug(){

  var debug = "";

  for (i=0; i<survey.length; i++) {

    debug += "No " + survey[i][0] + " = " + survey[i][1] + "\n";

  };

  alert(debug);

};

</script>

5、代码整体结构。

6、查看效果。