Почему мой 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> 

Почему это не работает? Я не ошибаюсь, но ничего не происходит. Спасибо.

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 часто добавляет излишнюю сложность к простым проблемам.

Правильно работающий пример кода с использованием ванили 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"); } 
});