Setting the value of a checkbox input if not checked

Question

I am trying to change the value of a checkbox input based on whether the checkbox input is checked or not checked. Here is what I have:

HTML:

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">

JavaScript:

function myFunction() {
  var chkPrint = document.getElementById("chkPrint");
    if (chkPrint.checked == true) {
      chkPrint.value = "true";
    }
  }
function yourFunction() {
  if (document.getElementById("chkPrint").checked == false) {
     document.getElementById("chkPrint").value = "false";
  }
}
yourFunction()

When I look at my HTML in the Chrome DevTools, I see my value change to true. However, if I were to uncheck it, then the value would remain true.

score 2 · Answer 1 · 2018-08-09T08:37:17.443

You are close enough:

function myFunction() {
  var chkPrint = document.getElementById("chkPrint");
  chkPrint.value = chkPrint.checked;
  console.log('value', chkPrint.value);
}
myFunction()

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">

Try this script which can handle multiple checkboxes:

let setValue = function(e) {
  this.value = this.checked;
  console.log('value', this.value);
};

document.addEventListener('DOMContentLoaded', function() {
  console.log('page loaded...');
  document.querySelectorAll('[name=item]').forEach(function(chk) {
    chk.addEventListener('click', setValue);
    setValue.bind(chk).call(); /* set true/false on page load */
  });
});

<input type="checkbox" name="item" /><input type="checkbox" name="item" /><input type="checkbox" name="item" checked=''/><input type="checkbox" name="item" />

score 0 · Answer 2 · answered Aug 09 '18 at 06:47

First make the chkPrint value to be false on every click, and if its checked then only make it true.

 function myFunction() {
                var chkPrint = document.getElementById("chkPrint");
                chkPrint && chkPrint.value = "false";
                if (chkPrint.checked == true) {
                    chkPrint.value = "true";
                }
            }

score 0 · Answer 3 · answered Aug 09 '18 at 06:48

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()" onchange="yourFunction()">

https://www.w3schools.com/jsref/event_onchange.asp

Or you can simply merge the these functions and assign to Event onchange.

If you are dealing with server side value from form. Please have a lot on this discussion. Does <input type="checkbox" /> only post data if it's checked?

score 0 · Answer 4 · answered Aug 09 '18 at 06:55

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction();yourFunction()">
<script>
function myFunction() {
            var chkPrint = document.getElementById("chkPrint");
            if (chkPrint.checked == true) {
                chkPrint.value = "true";
                console.log(chkPrint.value)
            }
        }
function yourFunction() {
  if (document.getElementById("chkPrint").checked == false) {
     document.getElementById("chkPrint").value = "false";
      console.log(chkPrint.value)
  }
}

</script>

This is because you were calling only one function "myFunction()" onclick event and other you were calling by default.You need to call both the functionsso that it checks for true as well as false.

But this can be easily optimised like this

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">
<script>
function myFunction() {
            var chkPrint = document.getElementById("chkPrint");
            if (chkPrint.checked == true) {
                chkPrint.value = "true";
                console.log(chkPrint.value)
            }
            else{
             document.getElementById("chkPrint").value = "false";
                         console.log(chkPrint.value)
            }
        }


</script>

Why don't you use the `chkPrint` variable in the `else` clause? — Barmar, Aug 09 '18 at 08:13

score 0 · Answer 5 · answered Aug 09 '18 at 07:01

If i understand your question, i think this code will solve your problem.

function myFunction(self){
  if(self.checked == true){
      self.value = true;
    }else{
       self.value = false;
    }
}

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction(this)">

Sumodh Nair · Answer 6 · 2018-08-09T08:58:43.053

0

Just change the event to onchange, and check the target value

function myFunction() {
    this.event.target.value = this.event.target.checked;    
 }

<input type="checkbox" id="chkPrint" name="Print" value="false" onchange="myFunction()">

edited Aug 09 '18 at 08:58

answered Aug 09 '18 at 07:18

Sumodh Nair

1,656
1
11
34

score 0 · Answer 7 · answered Aug 09 '18 at 07:53

This code will work :

<!DOCTYPE html>
<html>
<body>

Checkbox: <input type="checkbox" id="myCheck" onclick="check()">


<script>
function check() {
    if (document.getElementById("myCheck").checked){

      document.getElementById("myCheck").checked = true;
      alert ("Checked and Value is -->"+document.getElementById("myCheck").checked);
    }
    else
    {
      document.getElementById("myCheck").checked = false;
      alert ("Unchecked and Value is -->"+document.getElementById("myCheck").checked);
    }
}


</script>

</body>
</html>

You should explain what you did, to let others understand what the problem was. — eisbehr, Aug 09 '18 at 07:57

Setting the value of a checkbox input if not checked

7 Answers7