codingtcher.com
Theme Night
Home
Login

Confirmation message when a checkbox is clicked

Home » Tutorial Post » Confirmation message when a checkbox is clicked

Jquery Example


$(document).ready(function () {
        $('#checkbox').click(function(){                
            var areYouSure = confirm('Are you sure you want make this change?');
            if (areYouSure) {
                $(this).prop('checked', this.checked);
            } else {
                $(this).prop('checked', !this.checked);
            }
        });
});

Jquery Example 2


$('#checkbox2').click(function(){
if($('#checkbox2').is(':checked')){
  return confirm("Are you sure?");
}
});

Javascript Example


document.addEventListener('change', function (){
  var id = document.getElementById('checkbox');
  if(id.checked) {
    var answer = confirm("Are you sure?");
    if(!answer){
      id.checked = false;
    }
  }
});

Javascript Example 2


document.addEventListener("click", checkbox2);

function checkbox2(){
  var id = document.getElementById('checkbox2');
  if(id.checked) {
    var answer = confirm("Are you sure?");
    if(!answer){
      id.checked = false;
    }
  }
}

Javascript Example 3


document.addEventListener("click", function() {
  checkbox3();
});

function checkbox3() {
  var id = document.getElementById('checkbox3');
  var csure = confirm('Want make this change?');
  if (csure && id.checked) {
    id.checked = true;
  }
  else if(!id.checked && !csure){
    id.checked = true;
  }
  else{
   id.checked = false;
  }
}

Javascript Example 4


document.addEventListener("click", function() {
  checkbox4();
});

function checkbox4() {
  var id = document.getElementById('checkbox4');
  if (id.checked) {
    var csure = confirm('Want make this change?')
    if(!csure){
      id.checked = false;
    }else{
    id.checked = true;
    }
  }
  else{
    var csure = confirm('Want make this change?')
    if(!csure){
      id.checked = true;
    }else{
    id.checked = false;
    }
  }
}

Related Post