Javascript 基于复选框填充HTML表

我在一个HTML页面上有多个复选框，我希望能够根据所单击的复选框在第二个HTML页面上填充一个表

作为一个基本示例，下面是一个包含两个复选框的div。我希望这样，如果选中了

awareness\u复选框

，那么单词awareness及其值（0.01 CPC）将添加到我的第二个HTML页面上的表中

这样做的最佳方式是什么？我的目的是让一个HTML按钮链接到第二个页面（我们称之为“page2.HTML”），这样当它被单击时，页面上选中的每个复选框都会将其标签和相关值添加到将显示在第二个页面上的表中

任何帮助都将不胜感激

<div class="campaignstrategy">
    <h1>1. Campaign Strategy</h1>
        <input type="checkbox" name="awareness" id="awareness_checkbox" value="0.01">Awareness<br>
        <input type="checkbox" name="directresponse" id="directresponse_checkbox" value="0.01">Direct Response<br>
</div>

1.竞选策略
意识

直接响应

注意 好的，我重新编写了所有代码并在chrome上进行了本地测试，只需将两个文件保存在同一个目录中，然后在chrome中打开page1.html

代码摘录-第1页 为输入按钮指定自定义操作，这将选中所有复选框输入类型输入

然后，它将查看是否选中，如果选中，则在检查所有输入后，它将在

表\u info

变量中添加一个条目

然后它将javascript对象转换为json字符串，然后我们将该json转换为base64编码字符串

然后我们浏览到page2.html文件，在url中传递一个名为“table_data”的键，它的值是base64编码的字符串

代码摘录-第2页 当此页面加载到浏览器中时，以下脚本将检查查询键，在本例中，我们正在查找“table_data”键

这将由一个helper函数完成（详细信息请参见pastbin，省略以保持答案简短）

一旦获得数据，我们将把它从base64解码为json，然后使用json.parse函数重新创建javascript对象

创建对象后，我们将循环遍历数组，记住我们解码的javascript对象是一个字典数组

[{'name'：'awareness'，'value'：'0.01'}]

如您所见，它有复选框的名称及其关联的值

然后我们创建表行，并将名称和值附加到表数据元素内的表行中，每个名称和值对应一个

//实际代码
设table_data=getUrlParameter（'table_data'）；
让数据_from_page_1=JSON.parse（atob（table_data））；
对于（让我=0；这篇文章中有两个独立的问题。你应该只问一个问题。另外，分享你已经拥有的东西是公平的，而不仅仅是利用那里的志愿者来完成你的工作。谢谢你的回答。迪恩，我不确定它是否有效，但可能只有我一个人！我需要在page2.html中添加任何内容吗？这不是“page2.html”下的方法代码标题应该在第2页。html@bboooooyintheuk好的，我完成了这段代码，它可以工作，你可以测试它，只要用正确的代码创建两个HTML文件，page1.HTML和page2.HTML，通过链接…然后ta-da和你可以查看代码，看看我做得有多好，我可以给你发一条关于这个问题后续内容的消息吗？我真的很乐意谢谢你的帮助！
$('#next_page_button').click(function(){
    let table_info = [];
    $('.campaignstrategy input[type=checkbox]').each(
        function(index, value){
        if($(this).is(':checked')){
            table_info.push(
                {
                    name: $(this).attr('name'),
                    value: $(this).attr('value'),
                }
            );
        }
    });
    let base64str=btoa(JSON.stringify(table_info));

    window.location = "page2.html?table_data=" + base64str;
});

// actual code
let table_data = getUrlParameter('table_data');
let data_from_page_1 = JSON.parse(atob(table_data));

for(let i=0;i<data_from_page_1.length;i++){
    let row = $("<tr></tr>");
    let recordName = $("<td></td>").text(data_from_page_1[i].name);
    let recordValue = $("<td></td>").text(data_from_page_1[i].value);
    row.append(recordName, recordValue);
    $('#output_table').append(row);
}