多个复选框带有多个下拉列表和输入标签，将选定的值存储在一起/如果未选中则删除

Question

假设我有多个复选框和一些文本，然后是以下格式的 1-10 下拉列表

[CHECKBOX1]   [NAME1]    [DROPDOWN1 1-10]

[CHECKBOX2]   [NAME2]    [DROPDOWN2 1-10]

[CHECKBOX3]   [NAME3]    [DROPDOWN3 1-10]

.....

[CHECKBOXN]   [NAMEN]    [DROPDOWNN 1-10]

我知道我可以将检查的值捕获到一个数组中，如下所示

arr.push(document.querySelector('.messageCheckbox').checked); 

类似，我可以为 NAME1 执行此操作，并为值 1-10 执行 :selected 选项。

但是如何将每行值相互映射？因此，如果我 checkbox1，我会将输入的 Name1、选定的 dropdown1（从 1-10）推入一个数组中的一项？ N 个复选框的说法类似。我希望最终能得到一些数据，比如

IF 3 CHECKEDBOXS are CHECKED: {{BOB,2} , {SARAH,5}, {LILY,5}}

同样，如果我取消选中某个框，这些项目将从该数组中删除

Answer 1

在下面的解决方案中，我首先将所有输入行包装在一个公共父“包装器”中。这允许“事件委托”，其中该包装器内的任何点击都会冒泡并在包装器级别进行处理，而不是为每个复选框设置事件。

然后，在处理程序中，我们检查以确保我们仅响应复选框单击。

然后，我们确定是要添加到结果对象还是从中删除。

在

if

语句的每个分支中，我们添加该行文本框中的值，并从结果对象中选择或删除现有键。

// Set up object to hold the data
let results = {};

// Set up event delegation on the wrapper div
document.querySelector("#wrapper").addEventListener("change", function(event){
  // Only react to checkbox checks/unchecks
  if(event.target.type === "checkbox"){
    // Add or remove?
    if(event.target.checked){  
      results[event.target.nextElementSibling.value] = 
        event.target.nextElementSibling.nextElementSibling.value;
    } else {
      delete results[event.target.nextElementSibling.value];
    }
  }
  console.clear();
  console.log(results);
});

<div id="wrapper">
  <div>
    <input type="checkbox" class="r1">
    <input class="r1">
    <select class="r1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
  <div>
    <input type="checkbox" class="r2">
    <input class="r2">
    <select class="r2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
  <div>
    <input type="checkbox" class="r3">
    <input class="r3">
    <select class="r3">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
</div>