Question

ngOnInit() {
    this.filteredLocation = 'All';
  }

在浏览器中执行<div id="myDiv"> <input type="checkbox" id="chkAgreement" value="Y" /> </div>或检查$("#myDiv").html()元素时，标记不会更新。我期待有chkAgreement属性。

我需要获取HTML并将其保存在数据库中。但是令我惊讶的是，即使该复选框未选中-checked返回true。

如何为复选框添加适当的checked属性来更新DOM？

在用户选中复选框后，我应该做$("#chkAgreement").is(":checked")吗？可以，但是这是正确的方法还是我遗漏了一些东西？

Answer 1

也许这可以工作（如果您已经有jQuery）：

<script type="text/javascript">
$(document).ready(function(){
    $("#chkAgreement").change(function() { 
        if($(this).is(":checked")) { 
            //your code to update ...
        } else {
           // else statement ...
        }
    }); 
});
</script>

Answer 2

注意：

如果您要查找具有多个具有相同名称的复选框的解决方案，请签出此demo。另外请注意，除非您使用某些现代的JS框架，否则一旦呈现页面，DOM就永远不会改变。因此，我们不能期望基于任何用户交互对DOM进行任何更新。 @a_nain已经提到了这一点。

您可以使用普通的javascript来做到这一点：

var checkA = document.getElementById("chkAgreement");

// when the page loads
window.onload = function(e){
  console.log("checkbox value onLoad: " + checkA.checked);
}    

// when the user checks or un-checks the checkbox
checkA.addEventListener("click", () => {
  console.log('New Value:' + checkA.checked);

  if (checkA.checked) {
   console.log('Y checked');
  } else {
    console.log('Y unchecked');
  }
});

<div id="myDiv">
    <input name="agreement" type="checkbox" id="chkAgreement" value="Y"/> I agree with the terms
</div>

选中复选框后，为什么不更新DOM？

2 个答案:

注意：