签到框的数量并不总是"保持"

时间:2015-10-28 16:12:45

标签: jquery checkbox input

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

color

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



Row 1:   Month 1      Month 2    Month3 

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

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




1 个答案:

答案 0 :(得分:0)

您有两个问题:

  1. options.splice(idx,0)什么也没做,你想要options.splice(idx,1)
  2. 当您点击锚标记时,您在下一个勾选中选中/取消选中复选框,但您正在立即进行计数,因此它们会不同步。
  3. 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>