Javascript 复选框多重列表，在标签或复选框上混合单击 Select

let fruits_labels = document.querySelectorAll("#fruits .label");
let fruits_items = document.querySelectorAll("#fruits .label .item"); 

fruits_labels.forEach((label, index) => {

  label.onclick = (event) => {

    console.log("index: " + index);

    fruits_items[index].checked = (fruits_items[index].checked == true) ? false : true;

  }
  
  label.querySelector('input[type=checkbox]').addEventListener("click", function(event) {
      console.log("index: " + index);
      event.stopPropagation();
  });

});

let colors_labels = document.querySelectorAll("#colors .label");
let colors_items = document.querySelectorAll("#colors .label .item");

colors_labels.forEach((label, index) => {

  label.onclick = (event) => {

    console.log("index: " + index);

    colors_items[index].checked = (colors_items[index].checked == true) ? false : true;

  }

  label.querySelector('input[type=checkbox]').addEventListener("click", function(event) {
      console.log("index: " + index);
      event.stopPropagation();
  });
});

div.container{ margin: 0; padding: 0; margin-bottom: 10px; width: 200px; border: 1px solid black; }

div.container p.label { margin: 0; padding: 4px 8px; display: flex; align-items: center; border: 1px solid magenta; }

div.container p.label:hover { background-color: yellow; }

div.container p.label input[type=checkbox].item{ margin-right: 6px; }

<div class="container" id="fruits">
  <p class="label"><input class="item" type="checkbox">APPLE</p>
  <p class="label"><input class="item" type="checkbox">BANANA</p>
  <p class="label"><input class="item" type="checkbox">KIWI</p>
  <p class="label"><input class="item" type="checkbox">LEMON</p>
  <p class="label"><input class="item" type="checkbox">ORANGE</p>
</div>

<div class="container" id="colors">
  <p class="label"><input class="item" type="checkbox">RED</p>
  <p class="label"><input class="item" type="checkbox">GREEN</p>
  <p class="label"><input class="item" type="checkbox">BLUE</p>
</div>