JavaScript "If" Statement Regarding Checkbox Not Working

Question

I have set up an "if" statement in JavaScript that is to check whether or not a checkbox is checked. However, it does not seem to be working. It refers to a checkbox within a form, and the ID for the checkbox is "t1." Please let me know if there is anything apparent that would make it not function properly! It is to be executed when a button on the page is clicked, which should work properly without the "if" statement around it.

The code is below:

var t1v = document.getElementById("t1")

if (t1v.checked) {
    document.getElementById("l1q1").style.display = "inline";
    document.getElementById("1q1-1").style.display = "inline";
    document.getElementById("l1q1-1").style.display = "inline";
    document.getElementById("1q1-2").style.display = "inline";
    document.getElementById("l1q1-2").style.display = "inline";
    document.getElementById("1q1-3").style.display = "inline";
    document.getElementById("l1q1-3").style.display = "inline";
    document.getElementById("1q1-4").style.display = "inline";
    document.getElementById("l1q1-4").style.display = "inline";
}

You need to use a change event handler if you want to change the display when the checkbox is checked/unchecked — Arun P Johny
– Arun P Johny, Commented May 29, 2015 at 3:58
Edit the jsfiddle to recreate your problem... what you have given is insufficient for any solutions — Arun P Johny
– Arun P Johny, Commented May 29, 2015 at 4:06

Arun P Johny · Accepted Answer · 2015-05-29 04:09:13Z

1

From your comment, you need to do it in a button click

function t1Handler() {
  var t1v = document.getElementById("t1"),
    display = t1v.checked ? 'inline' : 'none';
  document.getElementById("l1q1").style.display = display;
  document.getElementById("1q1-1").style.display = display;
}

document.getElementById("mybtn").addEventListener('click', t1Handler, false);

<input id="t1" type="checkbox" />
<span id="l1q1">l1q1</span>
<span id="1q1-1">1q1-1</span>

<button id="mybtn">Do it</button>

answered May 29, 2015 at 4:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Benjamin Over a year ago

Thank you for responding! I have added to the code, but it's not quite working properly. I have updated the JSFiddle page, if you would be so kind as to take a look!

Arun P Johny Over a year ago

can you specify what should happen when the button is clicked

Benjamin Over a year ago

There should be radio buttons, etc. that show. But I got it working. Thanks so much for responding!

user786 · Accepted Answer · 2015-05-29 04:21:46Z

1

You need an event handler

Not sure where you are adding your "checked" condition.

It should be something like this

function click1(){
  
   if($("#t1").is(":checked"))
   {
     alert("checked");
   }
  else{alert("not checked")}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="t1"/>
<input type="button" id="btn" value="click here" onclick="return click1();"/>

edited May 29, 2015 at 4:21

answered May 29, 2015 at 4:04

user786

4,4406 gold badges53 silver badges112 bronze badges

2 Comments

Benjamin Over a year ago

Thank you for your response! Do I need an event handler, though, if I don't want action to be performed immediately after the checkbox is checked? I want it to happen after a button is clicked, which has an "onclick" event.

user786 Over a year ago

No problem. Just save the value true or false in some variable or you can just access the value of checkbox using if($("#t1").is(':checked'))

Benjamin · Accepted Answer · 2015-05-29 04:48:09Z

0

I got it working! The problem seemed to be that I removed the checkbox element from the document before running the code to check whether or not it was checked. Tha

answered May 29, 2015 at 4:48

Benjamin

1

Collectives™ on Stack Overflow

JavaScript "If" Statement Regarding Checkbox Not Working

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related