按下“css检查按钮”时如何在其他html中创建新图像？答案

【问题标题】：How create a new image other html when "css checked button" is pressed?按下“css检查按钮”时如何在其他html中创建新图像？
【发布时间】：2017-12-13 05:29:11
【问题描述】：

您好，我想知道这个问题。我在 index.html 上的 css 中创建了选中的按钮。当我签入 index.html 时，我想在 other.html 中创建图像。（other.html 在你按下之前是空的）如果你在 index.html 中检查了“检查按钮”，如何在 other.html 中创建新图像？

简单代码示例

<html>
<head>
<style> 
input[type="checkbox"] {}
</style>
</head>
<body>
<input type="checkbox"  >
</body>
</html>

【问题讨论】：

请上传您的代码
我添加示例简单代码。
一种方法是将选中状态存储在LocalStorage 中，当在other.html 中时，在确定是否应显示图像之前从LocalStorage 检索复选框状态。

标签： javascript jquery html css

【解决方案1】：

有一种简单的方法可以在不使用 LocalStorage 的情况下实现这一点，而只需一点点 JavaScript。该函数检查复选框是否被选中，并在 URL 中输出值，就好像它是一个“获取”表单一样。 “location.href”中的链接（other.html）相当于表单标签的 action 属性，是您的第二个页面。

function go() {
  var value = document.getElementById("checkbox").checked;
  location.href = "other.html?checked=" + value;
}

可以通过以下两种方式之一激活此功能。您可以创建一个带有 onclick 引用功能的按钮：

&lt;button onClick="go()"&gt;Continue&lt;/button&gt;

或者，只需使用“onChange”属性，其值等于函数 go()。这将在您单击复选框后立即激活该功能。

&lt;input type="checkbox" onchange="go()" /&gt;

因此，您的第一页 (index.html) 应该类似于以下内容：

function go() {
  var value = document.getElementById("checkbox").checked;
  location.href = "test2.html?checked=" + value;
}

input[type="checkbox"] {}

<input type="checkbox" id="checkbox" onchange="go()" /><br />
<button onClick="go()">Continue</button>

对于您的第二个页面，我们将实现一个功能来检测用户是否选中了按钮。 “yourImage.jpg”将是您希望用户查看他们是否已单击复选框的图像的 url。

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var check = getParameterByName('checked');

if (check == "true") {
  document.getElementById("image").src = "yourImage.jpg";
}

HTML 很简单，只有一个图像标签。 id 必须是“image”，否则上面的 JavaScript 将无法检测到它。 src 是空白的，但是可以为那些没有选中复选框的人更改为默认图像。

&lt;img id="image" src=""&gt;

最后，第二页应该是这样的：

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var check = getParameterByName('checked');

if (check == "true") {
  document.getElementById("image").src = "yourImage.jpg";
}

&lt;img id="image" src=""&gt;

编辑：要将图片添加到同一页面（index.html），只需使用以下代码：

function showImage() {
  var check = document.getElementById("checkbox").checked;

  if (check == true) {
    document.getElementById("image").src = "yourImage.jpg";
  }

  if (check == false) {
    document.getElementById("image").src = "";
  }
}

<input type="checkbox" id="checkbox" onchange="showImage()" />
<br />
<img id="image" src="">

【讨论】：

谢谢！你的代码是工作。我想知道，当我们检查检查按钮是否仍然停留在索引页面上时，当我们以不同的方式访问 other.html 时，我们可以在那里看到照片吗？（例如，质疑我们如何留在索引中？）
我更改了代码以包含一种根据index.html 上复选框的状态添加图片的方法。