Question

我有一个包含多个标题行的表，如下所示：

color

我想让用户能够选择他们想要看的字段，所以如果他们只想看到Ct＆amp; Ttl，然后第一行的colspan需要调整。我的下面的代码片段是＆＃34;几乎＆＃34;工作，问题是，有时在检查或取消选中一个字段后，新的计数是错误的 - 它将留在＆＃34;旧计数＆＃34;。如上所述，初始colspan是3，用户取消选中其中一个框，colspan应该下降到2，但它将保持为3.然后，用户可以取消选中第二个框，并且计数将赶上并且正确显示1.我的代码遗漏了什么吗？

＆＃13;

Row 1:   Month 1      Month 2    Month3 

Row 2:   Ct % Ttl     Ct % TTl   Ct % TTl

＆＃13;

var options = [];

$(document).on('click', '.dropdown-menu a', function(event) {
  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    column = 'table .' + val,
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 0);
    setTimeout(function() {
      $inp.prop('checked', true)
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', false)
    }, 0);
  }

  $(column).toggle();

  var ct = $("#ddColFilter input:checked").length;

  $("#tb").val(ct);

  $(".topRow").attr("colspan", parseInt(ct));

  $(event.target).blur();

  return false;
});

＆＃13;

Answer 1

您有两个问题：

options.splice（idx，0）什么也没做，你想要options.splice（idx，1）
当您点击锚标记时，您在下一个勾选中选中/取消选中复选框，但您正在立即进行计数，因此它们会不同步。

var options = [];

$(document).on('click', '.dropdown-menu a', function(event) {
  var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    column = 'table .' + val,
    $inp = $target.find('input'),
    idx;

  if ((idx = options.indexOf(val)) > -1) {
    options.splice(idx, 1);
    setTimeout(function() {
      $inp.prop('checked', true);
      updateCount();
    }, 0);
  } else {
    options.push(val);
    setTimeout(function() {
      $inp.prop('checked', false)
      updateCount();
    }, 0);
  }
  $(column).toggle();
  $(event.target).blur();

  return false;
});
function updateCount()
{
  var ct = $("#ddColFilter input:checked").length;
  $("#tb").val(ct);
  $(".topRow").attr("colspan", parseInt(ct));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-1 button-group" style="padding-top: 12px; padding-bottom: 1px; margin-bottom: 1px;">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;Filter Columns&nbsp;<span class="caret"></span>
  </button>
  <ul id="ddColFilter" class="dropdown-menu">
    <li>
      <a href="#" class="small underlineText_No" data-value="attRate" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Attendance Rate</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="enrDays" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Enrollment Days</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="msdDays" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Missed Days</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="lstRev" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Lost Revenue</a>
    </li>
    <li>
      <a href="#" class="small underlineText_No" data-value="lstHrs" onclick="" tabindex="-1">
        <input type="checkbox" checked="checked" />&nbsp;Instrl Hrs Lost</a>
    </li>
  </ul>
</div>

<div>
  <input id="tb" type="text" value="5" />
</div>

签到框的数量并不总是＆＃34;保持＆＃34;

1 个答案: