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.

Answer 1

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" /> 

Answer 2

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";
                }
            }

Answer 3

<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?

Answer 4

<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>

Answer 5

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)"> 

Answer 6

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()"> 

Answer 7

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>