CheckBox Values In HTML

Question

I'm trying to create a site settings page with some checkboxes. If the checkbox is 'ON' a HTML element has a certain value, else it would be something else. But for some reason every checkbox keeps returning the value "on" in JavaScript. Please help. My HTML:

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

My JavaScript:

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').value;

  if (valueOfCheckBox == 'on') {
  document.getElementById('TXT').innerHTML = 'ON';
  } else { 
  document.getElementById('TXT').innerHTML += 'OFF';
  }
}

Shani · Accepted Answer · 2018-03-11 10:08:29Z

1

your check boxes are checked by default. remove checked=checked from check box input

<input type='checkbox' id='theBOX'>

and yes you have to change the Javascript function to check whether check box has been checked or not

you can get the valueOfCheckBox to be true if the check box is checked otherwise it will be false

  var valueOfCheckBox = document.getElementById('theBOX').checked;

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').checked;

  if (valueOfCheckBox) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }
}

edited Mar 11, 2018 at 10:08

answered Mar 11, 2018 at 9:17

Shani

2,5413 gold badges20 silver badges23 bronze badges

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

Comments

Swapnil Goyal · Accepted Answer · 2018-03-11 10:29:08Z

1

You should remove the 'checked' attribute from your input tag

<input type='checkbox' id='theBOX' >

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').value;

  if (valueOfCheckBox == 'on') {
  document.getElementById('TXT').innerHTML = 'ON';
  } else { 
  document.getElementById('TXT').innerHTML += 'OFF';
  }
}

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

edited Mar 11, 2018 at 10:29

answered Mar 11, 2018 at 9:17

Swapnil Goyal

157 bronze badges

2 Comments

Mamun Over a year ago

I have tried your solution but it does not work. Did you try?

Swapnil Goyal Over a year ago

@Mamun you have not removed the checked attribute from your code, remove it.

kevinniel · Accepted Answer · 2018-03-11 09:21:47Z

You have multiple issues :

1 - You forgot the parentheses on the js function call :

<button onclick='theFunction()'>Apply Changes</button>

2 - When you set your js var with the value, or we dont need it. Just put this :

var valueOfCheckBox = document.getElementById('theBOX');

3 - Then to know wether it is check or not, use the js .checked property as following :

if (valueOfCheckBox.checked == true) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }

Finally, your code should look like this :

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
<script type="text/javascript">
function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX');
  if (valueOfCheckBox.checked == true) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }
}
</script>

Safwan Shaikh · Accepted Answer · 2018-03-11 09:51:30Z

You can use .checked property. This property returns true if the checkbox is checked by default, otherwise it returns false. If you want by default checked on input box, just add checked attribute in input tag.

<input type="checkbox" id="theBOX" checked>

Hope this may help you.

<head>
<script>
    function theFunction() {
        var valueOfCheckBox = document.getElementById('theBOX').checked;

        if (valueOfCheckBox) {
            document.getElementById('TXT').innerHTML = 'ON';
        } else {
            document.getElementById('TXT').innerHTML = 'OFF';
        }
    }

</script>
</head>

<body>

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

</body>

</html>

score 0 · Accepted Answer · 2018-03-11 11:04:11Z

0

This will work.

function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');

if (valueOfCheckBox.checked) {
document.getElementById('TXT').innerHTML = 'ON';
 } else { 
document.getElementById('TXT').innerHTML = 'OFF';
 }
 }

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked />
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

I would recommend you to use<label for="checkbox">Click this checkbox</label> instead of <p>Click this checkbox</p>.

edited Mar 11, 2018 at 11:04

answered Mar 11, 2018 at 10:58

user8158111

Collectives™ on Stack Overflow

CheckBox Values In HTML

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related