How to make a checkbox without a form

Question

I have been trying to make a simple app with 3 fields like this:

    <div id = "nameInput" >Name:</div><input id = "nameInputField" type = "text" name = "userName" />
    <div id = "emailInput" >Email:</div><input id = "emailInputField" type = "text" name = "email" />
    <input id = "termsCheck" type = "checkbox" name = "terms" />

The problem I am having is that I keep needing to try to wrap it in a form to get the checkbox to register as checked when it is. I DO NOT want to use a form because I don't ever want to submit anything.

Here is the JS for the checkbox as well. It is always marked as unchecked:

if ($('#terms').checked == true) {
    //Rest of code

Is there a way to make this without using a form or is there a reason that my checkbox is never registered as checked?

I am assuming you are using jQuery based on the code in your question — Naftali
– Naftali, Commented May 18, 2011 at 18:38
why would you NOT want to use a form? input is defined to always be part of a form — Dennis G
– Dennis G, Commented May 18, 2011 at 18:38
I keep getting issues with the form always submitting. I thought it would be easier without a form. I was also curious if it was possible — Soatl
– Soatl, Commented May 18, 2011 at 18:41
You could always wrap it in a form and not include a submit button. — Jason Gennaro
– Jason Gennaro, Commented May 18, 2011 at 18:42

JRodDynamite · Accepted Answer · 2016-11-17 08:56:48Z

26

<input id = "termsCheck" type="checkbox" name="terms" />

JS:

pre jQuery 1.6:

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

after jQuery 1.6:

if($('#termsCheck').prop('checked')){}

edited Nov 17, 2016 at 8:56

JRodDynamite

12.7k5 gold badges47 silver badges68 bronze badges

answered May 18, 2011 at 18:37

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2011-05-18 18:38:46Z

4

Two issues.

First, you're referencing the name of the input instead of its ID.

Second, in order to use the checked property, it must be done on the DOM element, not the jQuery object.

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

This is accessing the DOM element at index 0 of the jQuery object, then accessing its checked property.

You could also use the get()^[docs] method to retrieve the DOM element.

if( $('#termsCheck').get(0).checked ) {
    // ...
}

answered May 18, 2011 at 18:38

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

Tim Erickson · Accepted Answer · 2017-12-06 00:28:39Z

4

If you DON'T want to use jQuery, you could do something like:

<input id = "termsCheck" type = "checkbox" name = "terms" />

and refer to it this way:

if (document.getElementById("termsCheck").checked) {
}

edited Dec 6, 2017 at 0:28

answered Dec 6, 2015 at 20:28

Tim Erickson

5926 silver badges16 bronze badges

1 Comment

Edmundo Del Gusto Over a year ago

If you change getElementByID to getElementById it works perfectly fine

Naftali · Accepted Answer · 2011-05-18 18:40:46Z

1

You need to check the checked state differently

$('#terms').is(":checked")

edited May 18, 2011 at 18:40

Naftali

147k41 gold badges247 silver badges304 bronze badges

answered May 18, 2011 at 18:37

hunter

63.7k19 gold badges115 silver badges115 bronze badges

Comments

megakorre · Accepted Answer · 2011-05-18 18:44:49Z

1

the jquery object (witch im asuming your using) dosent have an checked field so that fill be false yes

what you can do is

 $("#terms").is(":checked")

answered May 18, 2011 at 18:44

megakorre

2,22316 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to make a checkbox without a form

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related