确认复选框，如果取消则保留原始复选框值

Question

有一个复选框值。当更改复选框值时，我向用户询问“您想在网站上显示此项目吗？”或“您想在网站上隐藏此项目吗？”

效果很好。但问题是“取消”选项。如果用户勾选复选框，则会出现确认框“您想在网站上显示此项目吗？”。但即使用户选择取消，它也会标记为已选择。即使我使用document.getElementsByName("product").checked = false;再次取消勾选，它也不起作用。

JS 小提琴

：https://jsfiddle.net/9mvrfuyd/7/

注意：请不要使用 jQuery 解决方案。只有纯 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;
    }
  }

 }

更新：我没有使用复选框的 id 属性，但我使用了

getElementsByName。所以这不是问题。

Answer 1

[0]

 中缺少 

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

更新了jsFiddle

getElementsByName()

方法返回所有元素的集合 具有指定名称的文档（名称的值 属性），作为 NodeList 对象。

NodeList 对象表示节点的集合。节点可以是 通过索引号访问。索引从0开始。

Answer 2

getElementsByName

返回元素列表，因此您需要为其添加索引。

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

Answer 3

Answer 4

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

Answer 5

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

}）