CODEWITHSUNDEEP
javascripthtmlcheckbox
Damith Ruwan
Damith Ruwan

Reputation: 338

Checkbox with Confirmation and Stay with Original Checkbox Value if Cancel

There is a checkbox value. When change the checkbox value I asked from user "Do you want to SHOW this item on website?" or "Do you want to HIDDEN this item on website?"

It is works fine. But the problem is cancel option. If user tick the check box confirm box will appear that "Do you want to SHOW this item on website?". But even user select cancel it will marked as selected. Even I use document.getElementsByName("product").checked = false; to make untick again, it is not worked.

JS Fiddle : https://jsfiddle.net/9mvrfuyd/7/

Note : Please No jQuery Solution. Only pure JavaScript.

HTML

<input type="checkbox" name="product" onchange="change_property_status(this.checked);">Option 1

JavaScript

function change_property_status(status){
  if(status){
    status = 1;
    var con_message = confirm("Do you want to SHOW this item on website?");
    if(!con_message){
      document.getElementsByName("product").checked = false;
      return false;
    }
  } else {
    status = 0;
    var con_message = confirm("Do you want to HIDDEN this item on website?");
    if(!con_message){
      document.getElementsByName("product").checked = true;
      return false;
    }
  }

 }

Update : I have not used id attribute for checkbox but I used getElementsByName. So it is not a problem.

Upvotes: 0

Views: 486

Answers (5)

Alex Hryntsaliou
Alex Hryntsaliou

Reputation: 1

Consider using JQuery.

$('element selector here').on('click', function(e){
  e.preventDefault();
  # further logic

})

Upvotes: 0

EA-Lille
EA-Lille

Reputation: 561

Just missing [0] in getElementsByName()

document.getElementsByName("product")[0].checked = true;

Updated jsFiddle

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Upvotes: 2

Felix
Felix

Reputation: 581

I think getElementsByName return list a of element so you need to add index to it. document.getElementsByName("product")[0].checked = false;

Upvotes: 1

Jigar Prajapati
Jigar Prajapati

Reputation: 112

try this it will helpful to you

HTML 

<input type="checkbox" id="product" name="product" onchange="change_property_status(this.checked);">Option 1

Javascript

function change_property_status(status){
  if(status){
    status = 1;
    var con_message = confirm("Do you want to SHOW this item on website?");

    if(con_message == false){
        document.getElementById("product").checked = false;
      return false;
    }
  } else {
    status = 0;
    var con_message = confirm("Do you want to HIDDEN this item on website?");
    if(con_message == false){
      document.getElementById("product").checked = true;
      return false;
    }
  }
 }

Upvotes: 0

Rebecca
Rebecca

Reputation: 25

Add the id="product" inside the input tag.

Upvotes: 0

Related Questions