将不同页面中的复选框设置为真状态（javascript）答案

【问题标题】：Set to true state a checkbox in a different page(javascript)将不同页面中的复选框设置为真状态（javascript）
【发布时间】：2017-08-07 06:22:37
【问题描述】：

这是脚本。

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 无法做到这一点，您需要一个服务器来做到这一点。
您有任何参考或示例先生，我该如何在本地存储上进行操作

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：

@PaulKevinMacandili，我不确定我明白你的意思。
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button> 这是我的原始按钮，用于将我重定向到我的 second.html 现在它不起作用，因为我只是复制粘贴您的代码先生
@PaulKevinMacandili，现在看看，告诉我它是否有效
很高兴能帮上忙。

【解决方案2】：

由于您的复选框位于另一个 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 上？
是的，它应该在您有复选框的第二页中

【解决方案3】：

您无法直接通过 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;
}

感谢 Bakudan，我从这个 post 得到它。

编辑： 所以这是一个简短的理论。

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

【讨论】：

所以我将把这个方法粘贴到我的函数 linkPageContact(){ }|?
@PaulKevinMacandili 不，您必须在 second.html 中设置函数才能获取 GET 参数。然后，如果它设置为 true，您可以通过 JavaScript 从您的 second.html 中选中该框。
您能解释更多吗？我只是不明白我很抱歉
所以整个功能都是一样的。先生，我不需要改变任何一个？
@PaulKevinMacandili 完全正确

【解决方案4】：

正如大家所提到的，您需要使用会话/查询字符串将任何变量/值传递到另一个页面。

单击第一个按钮【首页】添加查询字符串参数-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');
}
})

添加并尝试，它会工作。

【讨论】：

还是没有运气:(
您遇到了什么错误，什么不工作，在 URL 中您可以添加参数，并在第二页上进行检查。[通过添加警报]
使用修改后的代码或你的 -- function linkPageContact(clicked_id){ if(clicked_id === 'website-design-check'){ window.location.href = "/contact?checkboxClicked=true "; } } } 在第二页添加这个可能是contact.html或aspx .. $(document).ready(function(){ if(window.location.href.contains('checkboxClicked=true') { $('#idOfCheckbox' ).prop('checked','checked'); } }) 修改了你的代码本身。检查一下。

【解决方案5】：

从一个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>	
    <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);
        }		
      });
    </script>
  </body>
</html>

【讨论】：