如何使用 javascript 将输入字段值转换为复选框

Question

我一直在尝试使用 HTML、CSS 和 Javascript 创建待办事项列表。根据我的发现，我能够将输入字段的值获取到字段集中。 但是，我的目标是创建一种将输入字段值从文本字段转换为复选框字段的方法。

请在下面找到我的测试项目的代码：

 // Getting the Add Task button: var add_task = document.getElementById('TaskAdd'); // Listen for the add task click on button: add_task.addEventListener('click', addtask); //// Creating functions: // Adding task into the list: function addtask() { // Converting the input to task list: var task = document.getElementById("Taskname").value; // document.getElementById("Do1").innerHTML = task; var taskcheck = document.createElement("INPUT"); taskcheck.setAttribute("TaskCheck", "checkbox"); // document.getElementById("Do1").innerHTML = taskcheck; document.getElementById("TaskCheck").innerHTML = task; document.getElementById("Do1").innerHTML = taskcheck; };

 body { /* The image used */ background-image: linear-gradient(blue, red); object-fit: cover; /* Full height */ height: auto; width: 100%; /* Center and scale the image nicely */ background-position: center; background-size: cover; /*background-repeat: no-repeat;*/ }.center { text-align: center; background-color: aquamarine; }.background-cover { background-color: aquamarine; background-image: url("images/Custom Background(7).jpg"); background-size: cover; background-repeat: no-repeat; height: 400px; width: 1520px; }.background-cover-2 { background-color: aquamarine; background-size: cover; background-repeat: no-repeat; font-weight: bold; }.background-cover-3 { background-color: aquamarine; background-size: cover; background-repeat: no-repeat; }.container { text-align: center; }.fieldset2 { margin:2px; padding:0px; }

 <html> <head> <title>To-Do List Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <;-- Title of the project --> <h1 class="center"> To-Do List Program </h1> <,-- Creating the background of the cover --> <div class="background-cover"></div> <:-- Creating container to present the Inputfield to add task for the To-Do list --> <div class="container"> <h1 class="center"> Enter text into the input field to add items into your list </h1> <h1 class="center"> Click on the item to mark that the task are complete </h1> <h1 class="center"> Click on X to remove the task from To-Do List </h1> <input type="text" id="Taskname" name="Tname" placeholder="Input task" size="14"> <button type="button" id="TaskAdd" onclick="addtask():"> Add </button> <;-- Creating fieldset to locate the tasks into two sections, first section is the To-Do list --> <fieldset class="background-cover-3"> <legend class="background-cover-2"> To-Do: </legend> <ul id="Do1" style="list-style: none;"> <li> </li> </ul> </fieldset> <.-- Creating fieldset to locate the tasks into two sections, Second section is the Completed list --> <fieldset class="background-cover-3 fieldset2"> <legend class="background-cover-2 fieldset2"> Completed: </legend> <ul id="Com1" style="list-style: none;"> <li> </li> </ul> </fieldset> </div> <script src="main.js"></script> </body> </html>

那么，我如何才能从文本字段中获取输入值并将其转换为复选框呢？

Answer 1

如果要将文本字段值分配给复选框值，则可以参考以下内容。

HTML：

<input type="checkbox" id="testCheckox" value="Hi" />
<input type="text" id="textData" />

使用 Jquery：

$("#textData").change(function(){
    $("#testCheckox").val($(this).val());
    alert("checkbox value: "+$("#testCheckox").val());
});

记者：

let cb = document.querySelector("#textData");
cb.addEventListener("change", function() {
  document.querySelector("#testCheckox").value = this.value;
});

如何使用 javascript 将输入字段值转换为复选框

问题描述

1 个解决方案

解决方案1
0 2022-12-12 18:08:02

如何使用 javascript 将输入字段值转换为复选框

问题描述

1 个解决方案

解决方案1 0 2022-12-12 18:08:02

解决方案1
0 2022-12-12 18:08:02