如何根据复选框设置特定div的样式

Question

Okay so what I want to do is change the style of specific divs based on checkboxes being clicked..

I have several checkboxs like this...

<input  type="checkbox" class="the-checkbox" onchange="test()" value="1">
<input  type="checkbox" class="the-checkbox" onchange="test()" value="2">
<input  type="checkbox" class="the-checkbox" onchange="test()" value="3">

Each of these correspond to a div...

<div class="panel-heading" id="panel-1">
<div class="panel-heading" id="panel-2">
<div class="panel-heading" id="panel-3">

value="1" with id="panel-1, id="panel-2"with id="panel-2" etc

These elements are dynamic and are pulled from a database.

When a checkbox is clicked for example the one with the value="1" I want it to change the colour of the div with "id panel-1".

I also need this to work when multiple checkboxes are checked as this is for styling my "delete entry" functionality.

I am having trouble doing this in javascript here is what I have so far...

function test(){

    var checkboxes = document.getElementsByClassName('the-checkbox');

    for (var i=0 ; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {

      var cn = document.getElementsByClassName('panel-heading')[i].id
      cn.style.backgroundColor = "red"; // I know this line is incorrect

      }
    }
  }

Answer 1

You are on the right track

The value of the checkbox is the link between the checkbox and the div. Value 1 corresponds to div panel-1 etc. So use the value to get the corresponding div:

correspondingDiv = div with id ("panel-" + value of selected checkbox)


if (checkboxes[i].checked) {
    //Get the value of the checkbox
    var val = checkboxes[i].value;

    //Since the value is the link between the checkbox and the div, 
    //use it to get the corresponding div
    var correspondingDiv = document.getElementById("panel-" + val);

    //And apply the background color
    correspondingDiv.style.backgroundColor = "red"; 
}