Как проверить, установлен ли флажок перед продолжением?

Question

Как вы можете проверить, установлен ли флажок при нажатии кнопки «Отправить»? Я хочу, чтобы он показывал предупреждение, когда поле не отмечено.

http://jsfiddle.net/tjE24/42/

$('#submit').on('click', function() { 
    if($('#terms').is(':checked')) { 
    } 
    else { 
    alert("To proceed you must accept the terms.")   
    } 
}); 

Answer 1

Похоже, что вы хотите сделать, это остановить форму от представления, если флажок не установлен. Ваш код по-прежнему будет отправлять форму, независимо от результата вашей функции. Что вам нужно сделать, это вставить теги в тег <form> и добавить обработчик для события onsubmit, который отменит отправку формы.

HTML:

<form onsubmit="return check_checkbox()"> 
    <input type="checkbox" id="terms" unchecked/>Terms 
    <br /><br /> 
    <button id="submit"> 
     continue 
    </button> 
</form> 

Javascript:

function check_checkbox() 
{ 
    if($('#terms').is(':checked')) { 
    return true; 
    } else { 
    alert("To proceed you must accept the terms."); 
    return false; 
    } 
} 

http://jsfiddle.net/tjE24/47/

Answer 2

завернуть его в $(document).ready(function(){}); и использовать .prop()

$(document).ready(function(){ 
    $('#submit').on('click', function() { 
    if($('#terms').prop('checked')==true) { 
    } 
    else { 
    alert("To proceed you must accept the terms.")   
    } 
    }); 
}); 

Answer 3

Причина ваш JSFiddle не работает в том, что вы должны ждать, пока документ не будет загружен перед установкой обработчиков событий , В противном случае jQuery ищет кнопку отправки до того, как она будет существовать.

Чтобы убедиться, что кнопка загружена, используйте $(document).ready():

$(document).ready(function() { 
     $('#submit').on('click', function() { 
     if($('#terms').is(':checked')) { 
     } 
     else { 
      alert("To proceed you must accept the terms.")   
     } 
     }); 
    }); 

Обратите внимание, что вы уже имели дополнительную закрывающую скобку и кронштейн (который был синтаксическая ошибка), которая теперь закрывает функцию $(document).ready.