javascript - 使用基于复选框状态的 JavaScript 操作文本

Question

我正在尝试创建一个简单的 HTML 页面，通过复选框为用户提供多个选项。我需要生成一个字符串，存储在一个变量中，单击按钮时我可以在页面上使用该变量，它会根据选中的框而有所不同。

该字符串将是一个 URL(“http://example.com/index.htm&term=”)，并且需要为选中的每个复选框附加额外的文本。

例如，如果只选中一个框，比如 box1，则字符串“box1”应该附加到 URL 变量，看起来像“http://example.com/index.htm&term=box1”

如果选中了多个框，比如选中了 box2 和 box3，则应将字符串“box2%20OR%20box3”附加到 URL 字符串。

我很确定这可以用 JavaScript 完成，但我没有这方面的经验，希望能提供一些指导/示例。

Answer 1

我建议不要将它存储在变量中，而是调用一个在按下按钮时构建链接的函数。如果你真的想把它放在一个变量中，你可以为每个复选框的 change 事件设置一个事件监听器，并在每次选中一个复选框时调用该函数来更新变量或未选中。

function checkboxUrl(checkboxes) {
    const
        url = `http://example.com/index.html`,
        checkedArray = [];

    for (let checkbox of checkboxes) {
        if (checkbox.checked) checkedArray.push(checkbox);
    };
    
    const checkboxString = checkedArray.map(checkbox => checkbox.value).join(`%20OR%20`);
    return url + (checkboxString ? `?term=` + checkboxString : ``);
}

let checkboxes = document.querySelectorAll(`input[type='checkbox']`);

label {
  display: block;
}

<label><input type='checkbox' value='box1'>box1</label>
<label><input type='checkbox' value='box2'>box2</label>
<label><input type='checkbox' value='box3'>box3</label>
<button onclick='console.log(checkboxUrl(checkboxes))'>Get URL</button>