未选中复选框或脚本停止继续

Question

我希望用户只需单击该行，然后选中或取消选中该复选框。
我希望该行具有动画效果并向上或向下移动，以便选中的项目显示在列表底部。

一切正常！ :-)

但是当我点击实际的复选框时，它并没有被选中。我试过使用 stopPropagation，但它只是停止了动画。

我已经尝试了很多东西，但 none 都有效。 :-(

怎么办？？ :/

您可以在此处查看演示：

$(document).ready(function () {
 $('.row').click(function (){
  var checkbox = $(this).find('input[type=checkbox]');
  checkbox.prop("checked", !checkbox.prop("checked"));
  
  var upordown = checkbox.prop("checked");
  if(upordown){
   $( this ).slideUp(function() {$( this ).insertAfter( "#foo" );
      $( this ).slideDown();
       });
   }
  else{
   
   $( this ).slideUp(function() {$( this ).insertBefore( "#foo" );
      $( this ).slideDown();
    });
   }
 });
 
// $('input[type=checkbox]').click(function (e)
// {
//  e.stopPropagation();
//  return true;
// });
 
});

.row {
 width: 300px;
 padding: 4px;
 margin: 2px;
  border:1px solid #666;
}
.left {
 float: left;
 width: 25px;
}
.clear {
 clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">Todo</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="1"/>
  </div>
  <div class="center">Item1</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="2"/>
  </div>
  <div class="center">Item2</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="4"/>
  </div>
  <div class="center">Item3</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="6"/>
  </div>
  <div class="center">Item4</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="11"/>
  </div>
  <div class="center">Item5</div>
  <div class="clear"></div>
</div>
<div class="row" id="foo" style="Display: none;"></div>

Answer 1

我怀疑是冒泡事件的问题。考虑以下代码。

$(function() {
  $(".row, input[type='checkbox']").click(function(e) {
    var row;
    if ($(e.target).is(".row")) {
      row = $(e.target);
    } else {
      row = $(e.target).closest(".row");
    }
    var checkbox = $('input[type=checkbox]', row);
    checkbox.prop("checked", !checkbox.prop("checked"));

    var up = checkbox.prop("checked");
    if (up) {
      row.slideUp(function() {
        row.insertAfter("#foo").slideDown();
      });
    } else {
      row.slideUp(function() {
        row.insertBefore("#foo").slideDown();
      });
    }
  });
});

.row {
  width: 300px;
  padding: 4px;
  margin: 2px;
  border: 1px solid #666;
}

.left {
  float: left;
  width: 25px;
}

.clear {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-wrapper">
  <div class="row">Todo</div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="1" />
    </div>
    <div class="center">Item1</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="2" />
    </div>
    <div class="center">Item2</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="4" />
    </div>
    <div class="center">Item3</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="6" />
    </div>
    <div class="center">Item4</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="11" />
    </div>
    <div class="center">Item5</div>
    <div class="clear"></div>
  </div>
  <div class="row" id="foo" style="Display: none;"></div>
</div>

这按预期工作。由于 row 元素可能不是点击目标，我们可能需要解决这个问题以确保我们选择了正确的元素。

未选中复选框或脚本停止继续

Either checkbox isn't checked OR script stops from continuing

jquery

jquery-ui