Question

我有一个特定的问题，我需要从服务器呈现一个html字符串并将其显示给用户。然后，用户单击复选框，然后将其转换回html字符串并将其保存在服务器上。

问题是在用户单击复选框后，转换的HTML字符串不包含checked属性。

这是一个片段

＆＃13;

$("button").on("click", function(){

   console.log($("#container").html());

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <input type="checkbox" id="checkbox"/>
    <button> Test </button>
</div>

＆＃13;

但是当我手动点击复选框并单击按钮并检查控制台日志时，看不到HTML字符串中的已检查属性。

我该如何解决这个问题？

Answer 1

在更改时由checked手动设置.attr('checked', 'checked')属性：

$("button").on("click", function() {

  console.log($("#container").html());

});

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    $(this).attr('checked', 'checked');
  } else {
    $(this).removeAttr('checked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="checkbox" id="checkbox" />
  <button> Test </button>
</div>

Answer 2

当您手动选中复选框时，checked HTML属性不会更改。

您可以通过选中每个选中的复选框并使用jQuery :checked选择器手动更新它们来自行更改：

$('#container input[type="checkbox"]:checked').attr('checked','true');

$("button").on("click", function() {
  $('#container input[type="checkbox"]:checked').attr('checked','true');
  console.log($("#container").html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="checkbox" id="checkbox" />
  <button> Test </button>
</div>

使用html（）

2 个答案: