如何在选中复选框时保留输入值Javascript？
在选中复选框时保留输入值的方法可以通过Javascript来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<body>
<h2>保留输入值示例</h2>
<input type="checkbox" id="myCheckbox" onclick="saveInputValue()"> 选中复选框时保留输入值<br><br>
<input type="text" id="myInput" placeholder="输入值">
<script>
function saveInputValue() {
var checkbox = document.getElementById("myCheckbox");
var input = document.getElementById("myInput");
if (checkbox.checked) {
// 选中复选框时，保存输入值到localStorage
localStorage.setItem("inputValue", input.value);
} else {
// 取消选中复选框时，清除localStorage中的输入值
localStorage.removeItem("inputValue");
}
}
// 页面加载时，检查localStorage中是否有保存的输入值
window.onload = function() {
var inputValue = localStorage.getItem("inputValue");
var input = document.getElementById("myInput");
if (inputValue) {
// 如果有保存的输入值，则将其设置到输入框中
input.value = inputValue;
document.getElementById("myCheckbox").checked = true;
}
}
</script>
</body>
</html>这段代码实现了以下功能：
- 当复选框被选中时，将输入框中的值保存到浏览器的localStorage中。
- 当复选框被取消选中时，清除localStorage中保存的输入值。
- 页面加载时，检查localStorage中是否有保存的输入值，如果有，则将其设置到输入框中，并且选中复选框。
这样，当用户输入一些值，并选中复选框后，即使刷新页面或关闭浏览器，再次打开页面时输入框中的值仍然会被保留下来。
推荐的腾讯云相关产品：腾讯云对象存储（COS）
- 概念：腾讯云对象存储（Cloud Object Storage，COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于存储和处理任意类型的文件和数据。
- 分类：云存储服务
- 优势：高可靠性、低成本、安全性高、支持多种数据处理功能
- 应用场景：网站和应用程序的静态资源存储、大规模数据备份和归档、多媒体内容存储和分发等。
- 产品介绍链接地址：腾讯云对象存储（COS）
请注意，以上答案仅供参考，具体的实现方式和推荐产品可能因实际需求和环境而有所不同。
相关·内容
2回答
使用localStorage保存复选框选择问题
javascript、jquery
：保存复选框选择localStorage >>，这样用户就不必一次又一次地选中所有复选框。
问题：I可以在localStorage中保存选项，但是复选框没有显示onload，机制似乎也颠倒了，而复选框则是未选中捕获的等等。
我是不是遗漏了什么？
这里是我的代码
// issue: if localStorage saves the checkbox, the input field will not display
$('input[type="checkbox"]').click(function () {
浏览 0提问于2018-10-12得票数 0
1回答
从本地存储获取复选框状态
javascript、checkbox、local-storage
我已经将1.html中的复选框状态存储在localStorage中(可以选中也可以不选中)。
在不同的文档中，2.html，使用香草javascript，我如何知道复选框是选中还是未选中？
试过这个，没有运气：
if localStorage.getElementById("my_checkbox").checked {
alert("checked") ;
}
和
if localStorage.getItem("my_checkbox").checked {
alert("checked") ;
}
谢谢!
浏览 7提问于2014-09-03得票数 0
回答已采纳
3回答
“输入”字段出现在默认复选框中。
javascript、html、checkbox
我正在处理一个表单，在这个表单中，我们可以选择将产品分配给对象，或者在本例中是用户。根据在代码中检索和使用的数据库中给定的值，默认情况下，该用户可能有这些特定产品之一。
if($Pants=="1"){
echo "<input type='checkbox' onclick='PantsInput(this);' checked>Pants<br>";
}
else {
echo "<input type='checkbox'> Pants<br>
浏览 2提问于2016-11-13得票数 0
回答已采纳
1回答
使用localStorage在整个站点中保留复选框的值
javascript、jquery、html、local-storage
该示例允许用户在单击时将图像附加到容器。复选框在每个页面上都可以很好地工作。但是，当我选中页面上的复选框以存储图像，然后转到另一个页面并选中另一个复选框时，浏览器将用当前页面的新值替换上一页中存储的值。有没有办法在整个站点中保留所有选中的复选框的值？
jQuery：
var $chks = $('.compare').change(function () {
if ($(this).is(':checked')) {
var img = $('<img>'),
findimg = $(
浏览 1提问于2014-06-16得票数 0
5回答
如何在使用本地存储重新加载页面时更新输入值？
javascript、html、local-storage
当用户在输入元素中输入文本时，我希望能够保存他们输入的内容，这样如果他们刷新文本，仍然会被缓存。
const input = document.getElementById('input')
input.onchange = function(){
const key = input.value;
localStorage.setItem('key', key)
input.value = localStorage.getItem("key");
};
浏览 0提问于2019-01-05得票数 3
回答已采纳
3回答
选中主干中的复选框时禁用输入字段
javascript、backbone.js
我对Backbone.js和jQuery完全陌生，当我选中复选框时，我试图将表单的输入字段设置为“禁用”。我不确定我是否必须按照下面代码中显示的方式来做，如果是这样的话，我应该在disableInput函数中做些什么？
JS
events: {
'change #myCheckbox': 'disableInput',
},
disableInput : function(){
...
}
<div class="x">
<input type="text" id="myInput
浏览 1提问于2018-02-28得票数 0
回答已采纳
2回答
将文本put值与复选框值之和相乘，并将其显示在段落上
javascript、html
我正在尝试将输入的文本输入值与单击的复选框值之和相乘。到目前为止，当您单击复选框时，它们的平均值的总和会立即显示在span emlement上，使用id="Totalcost"....i需要一些帮助来弄清楚如何将选中的复选框的总和与文本输入字段中输入的值相乘。
如果使用JQuery就可以轻松完成，我将不胜感激。
提前谢谢。
以下是我的代码
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
浏览 2提问于2015-02-27得票数 0
3回答
本地存储中的javascript数组
javascript、jquery、arrays
我有一段代码，它向带有输入框的数组中添加值。我希望将该数组保存在localStorage中，并将数组的内容显示在另一个页面上。
<button type="button" id="submit">Submit</button>
<button type="button" id="display">Display</button>
window.onload = function() {
var inputArray = [];
var input = document
浏览 0提问于2016-11-15得票数 0
回答已采纳
2回答
localStorage -检索复选框值
javascript、local-storage
我正在使用一个表单(用Bootstrap 4制作)和localStorage。我使用它，以便可以在另一个页面上使用表单输入值。它可以很好地处理输入，但在这种形式中，我也有复选框，无法找到如何执行以下操作:我想检查选中哪个复选框。对于选中的内容，我想在localStorage中添加复选框标签文本，以便在我的另一个页面上使用它。我怎样才能做到这一点？
我的html如下所示：
<form role="form" id="form" data-toggle="validator">
<div class="form-
浏览 0提问于2019-03-21得票数 0
回答已采纳
4回答
localStorage如何保存复选框
javascript、html、local-storage
我想保存一个带有本地存储的复选框。因此，当我选中这个框，关闭浏览器并重新打开它时，它仍然会被选中。现在，如果我单击复选框并按下保存按钮，它就不会保存复选框。
我怎样才能做到这一点？
这是我的密码：
<script>
function save(){
var checkbox = document.getElementById('checkbox1zaal1');
if(document.getElementById('checkbox1zaal1').checked) {
localStorage.setItem(&#
浏览 7提问于2014-10-29得票数 12
回答已采纳
2回答
Checkbox使用jquery过滤产品，并在重新加载时保持状态
javascript、jquery
我想创建一个页面，我可以在其中过滤带有复选框的产品，但也可以在页面重新加载时保留过滤选择。
<div class="checkbox checkbox-success checkbox-inline ">
<input type="checkbox" id="1" value="option1" >
<label for="1">Adidas</label>
</div>
<div class="checkbox checkbox-succe
浏览 2提问于2018-11-22得票数 0
1回答
如何在javascript中使用本地存储将多个注释堆叠在一起？
javascript
我正在做一个javascript笔记应用。以下是到目前为止的代码: Javascript是： var inputValue = document.getElementById('myInput');
var input = document.getElementById('myInput');
var button = document.getElementById('myButton');
function run(){
localStorage.setItem('inputer', inputValue);
let p
浏览 36提问于2020-09-22得票数 0
2回答
如何将元素添加到数组，然后将数组的新值添加到localStorage？
javascript
我正在尝试创建一个管理面板，您可以在其中添加输入中的单词，然后将这些单词添加到一个数组中，该数组更新他的值并将其添加到localStorage中。
我曾尝试向按钮添加事件侦听器，但当我第一次单击它时，它会添加值，但当我第二次单击它时，它会添加相同的值。
let input = document.querySelector('.word-input');
let inputValue = input.value;
let btn = document.querySelector('.btn');
let p1 = document.querySelector(&#
浏览 0提问于2019-02-02得票数 0
2回答
选中复选框并在localStorage jQuery中隐藏输入字段
javascript、jquery、checkbox
我试图使用checkboxes隐藏输入框，在localStorage中保存checkbox名称，在input上保存.hide()可以工作，但是当我刷新页面时，它不会保存要隐藏的input字段，也不会将checkbox保存为uncheck。
有人能指出我缺少了什么吗?我知道检查if()仍然不完整，我尝试在if中执行一个for()来获取localStorage值，并执行('#'+forVal).hide()或('#' + forVal).prop('checked', false)，但这根本行不通。
inputs是动态的
searchParams =
浏览 1提问于2017-01-03得票数 1
1回答
如何根据localStorage状态选中/取消选中复选框
javascript、html、templates、input、checkbox
我试图仅使用HTML和CSS将复选框状态持久化到html模板中，但我遇到了奇怪的行为，即使localStorage正确地保存了状态，但在加载时状态总是被设置为真。我查了一大堆答案，被困了几个小时，我不明白它是不是不起作用：
HTML：
<input id="returnHeatmapsHtmlCheckbox"
type="checkbox" name="returnHeatmapsHtml" onclick="saveCheckboxState(this)" />
JS：
<script type="
浏览 34提问于2020-05-14得票数 0
1回答
在切换时禁用输入，在jQuery中
javascript、jquery
如果选中了复选框，我想切换div并禁用输入框。此代码用于切换DIV，但不会重新启用输入框。这在升级到jQuery 1.9之前是有效的。
有什么想法吗？
$(".myLink").on("click", function(){
$(".newDiv").toggle(); // Toggle the div to show/hide
$(".myInput").val('').prop('disabled', $(this).attr('checked')); // D
浏览 1提问于2012-12-27得票数 3
2回答
使用LocalStorage存储复选框选中值的数组，并在页面刷新时检索它
javascript
我正在处理我的联系人表单中具有复选框列表的页面。我希望对输入值执行的操作是将其存储在localStorage密钥中。当我试着这么做的时候，它成功了。已提交到确认页面。但当我返回到上一页时，选中的输入复选框确实被选中了。但是，当我尝试取消选中复选框时，值仍然保存在本地存储中，但它一直保存到数组的最后一个元素。 下面是我的html结构： <input
id='item3'
name='check-item'
value='Item1'
type='checkbox'
/>
<
浏览 29提问于2021-08-16得票数 0
4回答
JavaScript: element.setAttribute(属性，值)，element.attribute=value &element.[属性]=不改变属性值的值
javascript、html、css、setattribute
我的任务是在用户单击输入框并使标签可见时，从输入框中删除占位符。如果用户没有再次填写任何内容，请将占位符放回位置并使标签不可见。
我可以把它藏起来，但不能重新分配。我尝试过element.setAttribute(属性、值)、element.attribute=value & element.attribute=value类型，但没有工作。
我保留了默认的visibility of <label> "hidden"
我已经为任务创建了隐藏()和show()函数，这两个函数都有两个参数，即。
输入框id
标签id
代码JavaScript：
v
浏览 0提问于2018-08-01得票数 0
回答已采纳
1回答
在Vue 3中，基于计算属性的元素在使用localStorage后似乎不会重新呈现。
为了演示这一点，我们将有一个带有两个复选框和文本输入字段的简单表单。当选中这两个复选框时，输入字段应变为只读字段.
<div id="app">
<form>
<label>
Checkbox A
<input type="checkbox" v-model="checkboxA" />
</label>
<label>
Ch
浏览 2提问于2021-01-26得票数 1
回答已采纳
2回答
如何使用JavaScript在输入字段中保留最后存在的文本？
javascript、html
大家好，我的老师在复选框和输入字段上给了我一份作业，他希望在默认情况下禁用输入字段，并在选中相应的复选框后打开该字段，并在该字段上存储值，如果我再次取消选中该复选框，则该字段应该是清楚的，如果我再次选中相同的框，则该字段上的最后一个输入值将再次显示。我能够成功，但我发现了一个我无法解决的错误，如果我选中一个空框，我以前从字段中存储的值再次变为null。我已经将变量放在全局范围内，但变量仍然是null。(对不起，我的英语)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charse
浏览 1提问于2017-10-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
