Question

我想创建一个调查。这项调查有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>

Answer 1

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

<强>更新

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

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

我想将show resut作为序列化

1 个答案: