有没有办法从 .html() 获取复选框状态

Question

我正在尝试将 history.pushState 用于 ajax 搜索，但它没有保存复选框状态。

这是我如何将表单保存到推送状态的示例：

history.pushState({ FilterSearch: container.html() }, 'search', formAction);

其中 container 是带有复选框和结果的表单，formAction 是 url。这称为复选框的更改（在 ajax 调用的结果中）。

我觉得问题是 .html 似乎没有得到复选框的更新状态 - 请参阅下面的代码片段。

$('#test1').on('change', function() {
 console.log($('#test').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <input type="checkbox" id="test1" value="test">
</div>

如果您在选中和取消选中输入时查看控制台，您会发现它从未添加 checked 属性。

有没有办法让 pushstate 记住复选框的状态？

Answer 1

您可以使用 .is(':checked') 检查复选框是否被选中，returns true 或 false

$('#test1').on('change', function() {
 console.log($('#test1').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <input type="checkbox" id="test1" value="test">
</div>

Answer 2

感谢 ADreNaLiNe-DJ 和 Jai 的评论为我指明了正确的方向。我能够设置属性，然后按如下方式调用 .html：

$('#test1').on('change', function() {
    if (this.checked) {
        $(this).attr('checked', true);
    } else {
        $(this).removeAttr('checked');
    }
    console.log($('#test').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <input type="checkbox" id="test1" value="test">
</div>

有没有办法从 .html() 获取复选框状态

Is there a way to get the checkbox state from .html()

jquery

pushstate

html5-history