将另一个页面中的复选框设置为true (Javascript)

Question

这是剧本。

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">

现在，我如何在上述描述的基础上实现我想要的。有人能帮帮我吗伙计们。我被困在这里一个小时了。我无法获得任何关于从另一个页面获取复选框状态的引用。

Answer 1

为此，您可以修改按钮链接并添加其他参数，然后在下一页上进行处理。

不同页面的代码如下：

编辑：我把它改成了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>

​

Answer 2

您不能通过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;
}

多亏了巴库丹，我才从这个帖子上得到的。

编辑：

所以这里有一个简短的理论。

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

Answer 3

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

我可以提供给您的是使用局部存储保存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);
 });