要么是复选框没有被选中，要么是脚本停止继续。

Question

1. 我希望用户只需点击该行，就可以选中或取消选中复选框。
2. 我想让这一行以动画的形式向上或向下移动，这样被选中的项目就会出现在列表的底部。

所有这些工作都很好！ :-)

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

我试了很多方法，但都不奏效 :-(

该怎么做呢？:

你可以在这里看到一个演示。

$(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 元素可能不是点击目标，我们可能要解决这个问题，以确保我们选择了正确的元素。