Question

我是编码的新手，我需要在我的代码中使用Javascript。我在HTML表格中有一个复选框（在下面）。

<td><input type="checkbox" id="check1"/> 
<label th:text="${item.contents}">&nbsp;</label>
</td>

当我使用下面的代码选中框时，我正在尝试使用Javascript来提醒我。

<script>

$('#check1').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

</script>

为什么它不起作用？我没有收到错误，但也没有任何反应。谢谢。

Answer 1

好的，首先，你有一些不是HTML的语法：

 <label **th:text="${item.contents}"**>

而且，如果非HTML代码不正确，那么页面就足以停止处理了。你说你没有收到错误，但是你的意思是你已经检查了你的开发人员工具控制台窗口并且没有看到错误吗？

对于复选框，表格单元格和标签都与您的目标无关。

接下来，JQuery是一件好事，但它有时会使事情变得容易，变得更加困难。您的代码实际上是排除了将要检查的包装集中的任何已检查元素，因为您使用的是not()。

这是一个不依赖于JQuery的解决方案：

var chk = document.getElementById("check1");

chk.addEventListener("click", function(){

  // The following is not part of your question, but is
  // added just for completeness:

  // Because the alert() is modal, it will block the UI
  // from updating and it will most likely appear before
  // the UI updates the checkbox to the latest appearance.
  // To solve this, we add a short delay before making the
  // alert using a timer and we need to store the checked
  // status of the checkbox outside of the timer's callback
  // function.
  var on = this.checked;
  setTimeout(function(){

     var message = "checked";
     if(!on){
       message = "un" + message;
     }
     alert(message);

  }, 50);

});

<input type="checkbox" id="check1">

Answer 2

我认为在复选框和单选按钮等内容上点击事件通常是非常明智的。根据我的理解，可以在更新输入值之前触发它们，具体取决于您在dom中捕获事件的位置。

我不确定你的标签上的html语法是什么，th:text部分，但它似乎是某种模板语法，也可能是不相关的。为了帮助简化问题，我将在不使用jQuery的情况下给出一个示例，jQuery通常会给简单问题增加不必要的复杂性。

使用vanilla javascript（没有jquery）的代码的正常工作示例将是，

document.getElementById("check1").addEventListener('change', function(e) {
    var checked = this.checked;
    if(checked) { alert("Checked"); }
    else { alert("Unchecked"); }
});

使用jquery，一个有效的例子是：

$("#check1").on("change", function(e) {
    var checked = this.checked;
    if(checked) { alert("Checked"); }
    else { alert("Unchecked"); }
});

为什么我的Javascript工作不正常？

2 个答案: