Question

我遇到以下问题（我正在更新的旧系统）：

我在<div id='list'>。
当点击一个复选框JS时，会调用一个返回JS执行的ajax请求。
Ajax请求中的这个JS获取'#list'来缓存html，这样我们就可以在其他几个地方重新显示。

问题：缓存的html始终位于复选框值之前，而不是

之后

html代码：

<div id="list">
  <input id="checkboxRessource_413" type="checkbox" onclick="throwXMLHttpRequest('modif.php','', '4', '413','',  'contributeurUpdate');">name 1
  <br>
  <input id="checkboxRessource_414" type="checkbox" onclick="throwXMLHttpRequest('modif.php','', '4', '414','',  'contributeurUpdate');">name 2
</div>

ajax文件返回以下javascript：

var htmlList = $("#list").html();

问题是htmlList包含html在选中复选框之前，我该如何解决这个问题？

Answer 1

根据您使用的jQuery版本，onclick事件将在复选框的值实际更改之前触发并处理。我建议使用onchange事件而不是onclick，因为这样可以确保在复选框选中或取消选中后才会运行该事件。

此外，$.html()不会返回复选框的状态。每当您选中复选框时，DOM中的实际html都不会被更改; checked状态在输入中存储为property，而不是attributed。您需要手动检查每个复选框的checked状态，并将该信息发送到.php页面。请参阅此处的示例Fiddle。

var checkedStatus = []; // send this array to your php
$(':input', '#list').each(function () {
    checkedStatus.push($(this).prop('checked'));
});

onclick复选框+ ajax缓存html

1 个答案: