我想将结果显示为序列化答案

【问题标题】：I want show resut as serialize我想将结果显示为序列化
【发布时间】：2016-07-26 07:40:28
【问题描述】：

我想创建一个调查。本调查有 15 个问题。每个问题都有 4 个答案作为复选框。任务最多可以选择 2 个复选框，他们需要知道哪个选项是第一个（更重要），哪个选项是第二个（正常重要）。

我在 jsfiddle 上创建了它。我想在复选框选中“这是第一个选择”和“这是每个选择框右侧的第二个选择”时显示。我该怎么做？

var limit = 2;
$('input.single-checkbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});

var seq = 0,
  $wrapper = $("#wrapper"),
  $ch = $('input[type="checkbox"]', $wrapper);
$wrapper.on('click', 'input[type="checkbox"]', function() {
  if (this.checked) {
    $ch = $ch.not(this); //remove from jQuery array
    Array.prototype.push.call($ch, this); //add to front of jQuery array
  }
});

$("input[type=button]", $wrapper).on('click', function() {
  var str = $ch.filter(":checked").map(function(i, el) {
    return el.value;
  }).get().join("\n-\n");
  $("#result").text(str).show();
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>

  <div id="question">
    <h2>How are you today?</h2>
  </div>
  <div id="wrapper">
    <input class="single-checkbox" id="perfect" name="perfect" type="checkbox" value="perfect" />Perfect
    <br />
    <input class="single-checkbox" id="good" name="good" type="checkbox" value="good" />Good
    <br />
    <input class="single-checkbox" id="notbad" name="notbad" type="checkbox" value="notbad" />Not Bad
    <br />
    <input class="single-checkbox" id="worst" name="worst" type="checkbox" value="worst" />Worst
    <br/>
    <br/>
    <input type="button" value="Serialize" />
    <input type="button" value="Next Question" />
  </div>
  <div id=""></div>

</body>

</html>

【问题讨论】：

标签： javascript jquery serialization survey

【解决方案1】：

您可以使用data-order 属性来存储用户选中复选框的顺序。检查以下示例（请注意，用户最多可以检查 2 个复选框）：

更新

在每个检查输入的右侧添加了订单指示

$(document).on('change', '[type="checkbox"]', function() {  
  var that = $(this);
  var par = that.closest('ul');
  var checked = par.find('[type="checkbox"]').filter(':checked').length;

  if (that.is(':checked')) {
    // Add a 'data-order' attribute if the input is checked
    that.attr('data-order', checked).after($('<span class="order-span">Choice #' + checked + '</span>'));
  } else {
    // Remove 'data-order' if input is unchecked
    that.removeAttr('data-order').next('.order-span').remove();
  }

  // Disable the rest inputs if there are 2 checked inputs
  if (checked == 2) {
    par.find('[type="checkbox"]').not(':checked').prop('disabled','disabled');
  } else {
    par.find('[type="checkbox"]').removeAttr('disabled');
  }
});

$(document).on('click', '#serialize', function() {
  // Create an array that will hold the data
  var res = [];

  // Iterate over all the unordered lists that contain the checkboxes
  $('ul').each(function() {
    // Create an array that will hold the data of this ul
    var ulArr = [];
    var thisUl = $(this);

    // Iterate over the specific ul's list items
    thisUl.find('[type="checkbox"]').filter(':checked').each(function() {
      var inp = $(this);
      // Create an object for this input and push it to the appropriate array
      ulArr.push({
        id: inp.attr('id'),
        order: inp.attr('data-order')
      });
    }); 

    // Create an object for this ul and push it to the parent array
    res.push({
      ul: thisUl.attr('id'),
      inputs: ulArr
    });

  });

  // Serialize the object and alert
  var serializedObj = JSON.stringify(res);
  alert(serializedObj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_1">
  <li><input id="1" type="checkbox" /></li>
  <li><input id="2" type="checkbox" /></li>
  <li><input id="3" type="checkbox" /></li>
  <li><input id="4" type="checkbox" /></li>
</ul>

<ul id="ul_2">
  <li><input id="5" type="checkbox" /></li>
  <li><input id="6" type="checkbox" /></li>
  <li><input id="7" type="checkbox" /></li>
  <li><input id="8" type="checkbox" /></li>
</ul>
<button id="serialize">Serialize</button>

【讨论】：

哇。这对我来说并不容易，但很完美。非常感谢你。但我也想在选中复选框之前和之后查看答案。我的意思是当页面打开时，我想显示问题和答案，然后当用户选择一个复选框时，我想在所选答案的右侧显示“Choice #x”。有可能吗？