Javascriptが動作しないのはなぜですか？

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> 

なぜ機能しないのですか？私にはエラーはありませんが、何も起こりません。 ありがとうございます。

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

をそして、それ以外のHTMLコードが正しくない場合、ページが処理を停止するために、それが十分考えられます。

Answer 1

OK]をクリックして、まず、あなたはここに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は単純な問題に不必要な複雑さを加えることがあります。

ことwould（jquery without）javascript vanillaをusing your codeの

A properly working example、

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

そしてjquery持つ

、working exampleがです：

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