how to verify if a checkbox is checked in jQuery before submission

Question

<select name="status" id='status'>
    <option value="Submitted">Submitted</option>
    <option value="Canceled">Canceled</option>

</select>
<input type="checkbox" id="app_box" name="application_complete" value="checked"> App Complete

<script type="text/javascript">
$(function() {

    $('form.editable').submit(function(){ 
        if ($('#status').val()=='Canceled') { 
            if (!confirm('This  information will be discarded! )) { 
                return false; 
            } 
        } 
    }); 

}); 
</script>

So, I have the above script which works fine. I have to add one more confirmation. When the agent clicks on the submit button , I want to check if the application check box is checked or not. If it is not checked then display another confirmation box saying, you have to check the box. How can this be done in jquery.

possible duplicate - http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript — scibuff, Mar 06 '12 at 16:48

Sarfraz · Accepted Answer · 2012-03-06T16:51:56.797

10

Like this:

if ($('#app_box').is(':checked')){...}

Or

if ($('#app_box')[0].checked){...}

So here is how your code should be:

$('form.editable').submit(function(){ 
    if (! $('#app_box')[0].checked){
       alert('Check App Complete first !');
       return false;
    }

    if ($('#status').val() == 'Canceled') { 
        if (!confirm('This  information will be discarded!' )) { 
            return false; 
        } 
    } 
});

Learn more:

http://api.jquery.com/checked-selector/

edited Mar 06 '12 at 16:51

answered Mar 06 '12 at 16:46

Sarfraz

377,238
77
533
578

ok I have silly question which I did not find in the docs. how do i check if the checkbox is unchecked? – Micheal Mar 06 '12 at 17:06
1

@user856753: By putting `!` before condition like I have done above in `if (! $('#app_box')[0].checked){` or using `false` like `if ( $('#app_box')[0].checked === false){`. Both will do it. – Sarfraz Mar 06 '12 at 17:10

score 1 · Answer 2 · answered Mar 06 '12 at 16:46

1

:checked

(Documentation is your best friend...)

answered Mar 06 '12 at 16:46

Christoph

50,121
21
99
128

also, a simple search on google as 'jquery checkbox checked' gives lot of results. The first one being http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery – DG3 Mar 06 '12 at 16:49

score 0 · Answer 3 · answered Mar 06 '12 at 16:46

0

$("input[name='application_complete']").is(":checked"))

answered Mar 06 '12 at 16:46

DG3

5,070
17
49
61

score 0 · Answer 4 · answered Mar 06 '12 at 16:50

you can try something like this:

<script type="text/javascript">
$(function() {

    $('form.editable').submit(function(){ 
        if ($('#status').val()=='Canceled') { 

            //check if the box is checked!
            if ($("#app_box").is(':checked')) {
               alert("You have to check the box 'App Complete'"); 
               return false;
            }

            if (!confirm('This  information will be discarded! )) { 
                return false;
            } 
        } 
    }); 

}); 
</script>

I hope it helps!

how to verify if a checkbox is checked in jQuery before submission

4 Answers4