codingtcher.com
Theme Night
Home
Login

Display Text when Checkbox is Checked

Home » Tutorial Post » Display Text when Checkbox is Checked

Jquery Example


$("#myCheck").click(function(){
  if (this.checked){
    $('#text').show();
  } else {
     $('#text').hide();
  }
});

Jquery Example 2


$("#myCheck2").click(function(){
  if (this.checked){
    $('#text2').html("Checkbox is CHECKED!");
  } else {
     $('#text2').html("Checkbox is UNCHECKED!");
  }
});

Javascript Example


function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

Javascript Example 2


function myFunction2() {
  var checkBox = document.getElementById("myCheck2");
  var text = document.getElementById("text2");
  if (checkBox.checked == true){
    text.innerHTML = "Checkbox is CHECKED!";
  } else {
     text.innerHTML = "Checkbox is UNCHECKED!";
  }
}

Related Post