设置为true状态复选框在不同的页面（javascript）

问题描述：

的JavaScript

function linkPageContact(clicked_id){ 
    if(clicked_id === 'website-design-check'){ 
     $('#website-design').attr('checked',true); 
     window.location.href = "/contact"; 
    } 
    } 
}

我想检查我的复选框，当我点击与id=website-design-check按钮。

这是我的HTML。

first.html

<a href="/contact" target="_blank"> 
    <button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button> 
</a>

这里的第二个HTML文件，其中复选框。

second.html

<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">

现在我怎么能实现我想在上面给出的说明基地。任何人都可以帮我找人。我在这里呆了一个小时。我无法获得有关从其他页面获取复选框状态的任何参考。

你需要一个数据库或会话来保存数据。 –

我真的需要吗？ –

因为事件正在一个页面上发生，而更改发生在另一个页面上。 JavaScript或jQuery单独做不到这一点，你需要一台服务器来做到这一点。 –

答

要做到这一点，您可以修改您的按钮链接，并添加您可以在下一页上处理的其他参数。

对不同页面的代码会像：

编辑：我把它改成了jQuery，它现在应该工作。

脚本

function linkPageContact(clicked_id){ 
 
    if(clicked_id === 'website-design-check'){ 
 
     window.location.href = "second.html?chk=1"; 
 
    } 
 
    }

第二页

<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design"> 
 

 
<script type="text/javascript"> 
 
     var url = window.location.href.split("?"); 
 
     if(url[1].toLowerCase().includes("chk=1")){ 
 
      $('#website-design').attr('checked',true); 
 
     } 
 
</script>

现在的href没有功能 –

@PaulKevinMacandili，我不知道我明白你的意思 –

''' ''button type =“button”class =“btn btn-success btn-block”id =“website-design-check”onclick =“linkPageContact（this.id）”>约会'''这是我的原始按钮重定向到我的second.html现在它不工作，因为我只是复制粘贴您的代码先生 –

答

您无法直接通过JavaScript或jQuery处理其他网站。但还有另一种方法。你可以使用GET方法来实现这一点。

首先，你需要添加到链接像这样的属性，为first.html：

/contact?checkbox=true

您可以更改链接，只要你想用JavaScript。

现在它会引用相同的页面，但现在可能会有所不同。之后，您可以在second.html上使用此功能接收参数。

function findGetParameter(parameterName) { 
    var result = null, 
    tmp = []; 
    var items = location.search.substr(1).split("&"); 
    for (var index = 0; index < items.length; index++) { 
     tmp = items[index].split("="); 
     if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); 
    } 
    return result; 
}

谢谢巴库丹，我从post得到它。

编辑： 因此，这里是一个简短的理论。

当用户单击第一页上的按钮时，则将链接从/contact更改为/contact?checkbox=true。当用户转到second.html时，您将根据您从函数findGetParameter('checkbox')获得的值更改复选框。

所以我只是粘贴这个方法在我的函数linkPageContact（）{ } |？ –

@PaulKevinMacandili您不必在second.html中设置函数来获取GET参数。然后，如果它设置为true，您可以通过JavaScript从second.html中检查框。 –

你能解释更多先生吗？我只是没有得到它非常抱歉 –

答

因为您的复选框位于另一个html页面中，所以从第一个html页面无法访问它是完全正常的！

我可以提供的是使用localstorage来保留id，然后在第二页中使用它来检查它是否是你想要的ID。

因此改变你的函数将此：

function linkPageContact(clicked_id){ 
    localStorage.setItem("chkId", "clicked_id"); 
    window.location.href = "/contact"; 
}

然后在第二页的页面加载事件做到这一点：

$(document).ready(function() { 
    var chkid = localStorage.getItem("chkId"); 
    if(chkid === 'website-design-check'){ 
     $('#website-design').attr('checked',true); 
});

我应该在哪里放jquery先生？在我的second.html？ –

是的，它应该在你的第二页，你有你的复选框 –

尝试它，先生它不工作:( –

答

正如所有人都提到你需要使用会话/查询字符串来传递任何变量/值到另一个页面。第一个按钮[第一页]的

一个键添加查询字符串参数 - http://example.com?chkboxClicked=true

<a href="secondpage.html?chkboxClicked=true> 
<button>test button</button> 
</a>

在为查询字符串值的第二页面级检查，如果存在使该复选框属性为true。

在第二个页面级

$(document).ready(function(){ 
if(window.location.href.contains('chkboxClicked=true') 
{ 
    $('#idOfCheckbox').prop('checked','checked'); 
} 
})

添加，并尝试，它将工作。

好吧，先生，我会尝试这 –

仍然没有运气:( –

尝试它，仍然不工作:( –

答

从一个html文件传达到另一个html文件

可以解决使用查询使用localStorage

在不同的方法

这些问题参数
数据库或会话来保存数据。

在你的情况下，如果你的应用程序不支持IE低版本localStorage将是最简单和最好的解决方案。

<!doctype html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <a href="contact.html" target="_blank"> 
 
     <button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button> 
 
    </a> \t 
 
    <script> 
 
     function linkPageContact(clicked_id) { 
 
     localStorage.setItem("chkId", clicked_id); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

<!doctype html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design"> 
 
    <script> 
 
     $(document).ready(function() { 
 
     var chkid = localStorage.getItem("chkId"); 
 
     if (chkid === 'website-design-check') { 
 
      $('#website-design').attr('checked', true); 
 
     } \t \t 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

设置为true状态复选框在不同的页面（javascript）

相关推荐