复选框包含确认并保留原始复选框值如果取消

有一个复选框值。当更改复选框的值时，我向用户询问“你想在网站上显示这个项目吗？”或者“你想隐藏网站上的这个项目吗？”复选框包含确认并保留原始复选框值如果取消

它工作正常。但问题是取消选项。如果用户勾选复选框，确认框将出现“您想在网站上显示此项目吗？”。但即使用户选择取消它也会标记为选中状态。即使我使用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。所以这不是问题。

来源

2017-06-13 Damith Ruwan

只是缺少[0]在getElementsByName()

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

Updated jsFiddle

的getElementsByName()方法返回所有元素的集合中具有指定名称（名字属性的值）的文件，作为一个节点列表对象。

NodeList对象表示一组节点。节点可以通过索引号访问。索引从0开始。

来源

2017-06-13 08:37:54

在输入标签内添加id =“product”。

来源

2017-06-13 07:53:51 Rebecca

他使用getElementsByName –

哦！刚刚注意到。我会再检查一次。 – Rebecca

试试这个它会帮助你

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

来源

2017-06-13 08:15:04

不工作...............我不认为使用'getElementByName'而不是'getElementById'有问题。 –

我已经在你的jsfiddle中检查过它正在工作...... !!! :) –

我认为getElementsByName返回列表元素，因此您需要为其添加索引。 document.getElementsByName("product")[0].checked = false;

来源

2017-06-13 08:38:26

现场演示仍然缺少'[0]' –

复选框包含确认并保留原始复选框值如果取消

回答

相关问题