Javascript Checkboxes + dedicated variable creation

Question

I am a beginner in JS and I want to do following:

I have 30 Checkboxes, every Checkbox should create a dedicated variabel. How can I do this?

I only know to do it with 30 If-statements. But i Suppose, this is not the best practice??

So how can I create an statement, what indicated if the checkbxoes are checked or unchecked and then for every checked box create a variabel?

Thanks!

You can use event handlers in js. and every event handler keeps an object of the dom that the event has occurred on it so you need to have variables. — sajjad rezaei, Jan 14 '22 at 09:23
Take a look at [this](https://stackoverflow.com/questions/9887360/how-can-i-check-if-a-checkbox-is-checked) and can find some idea [here](https://stackoverflow.com/questions/70703597/swapping-webform-fields-with-javascript/70704787#70704787) — sajjad rezaei, Jan 14 '22 at 09:29
but as I see in this post, you need an if statement for every checkbox? I thought there could be a better way? — P M, Jan 14 '22 at 10:00
Nope, you don't need too many if statements. Take a look at my answer in [this](https://stackoverflow.com/questions/70703597/swapping-webform-fields-with-javascript/70704787#70704787) post I represent 3 ways. and to be clear what do you want to do after a checkbox is checked or unchecked? — sajjad rezaei, Jan 14 '22 at 10:16

sajjad rezaei · Answer 1 · 2022-01-14T13:26:09.913

Here is a code that will trigger an event when the check box with class checkbox is changed:

<div>
  <input type="checkbox" class="checkbox" name="option1">
  <label for="option1">option1</label>
</div>
<div>
  <input type="checkbox" class="checkbox" name="option2">
  <label for="option2">option2</label>
</div>


<script type="text/javascript">

 document.querySelectorAll('.checkbox').forEach(item => {
   item.addEventListener('change', event => {

     // lets get name that we can find out which one has been changed
     let name = event.target.getAttribute("name");
      if(event.target.checked){
        console.log(`${name} was unchecked and now is checked`);
      }else{
        console.log(`${name} was checked and now is unchecked`);
      }
      


   })
 })

</script>

so you can have as many checkboxes as you want with class checkbox

During our discuss in the comments you want to save some commands, so these may help you:

<div>
  <input type="checkbox" data-command="vlan1=command1" class="checkbox" name="option1">
  <label for="option1">option1</label>
</div>
<div>
  <input type="checkbox" data-command="vlan4=command2" class="checkbox" name="option2">
  <label for="option2">option2</label>
</div>

<button type="button" id="save">save</button>


<script type="text/javascript">


    let commands = [];
   document.getElementById("save").addEventListener("click" , event => {

        document.querySelectorAll('.checkbox').forEach(item => {

            
            if(item.checked){
                let name = item.getAttribute("name");
                //do some thing here
                commands['comamnd_' + name] = item.getAttribute("data-command");
            }

        });

   });
 

</script>

Whenever the submit button is clicked you have a loop throw all the inputs and save commands in an array.

After that, you can use the element of array like commands.comamnd_option1 or just loop throw the array.

thanks, that helped me so far. but now I need the next step. how can i create a variable fromt that specific ${name} value. so option1 was selected -> create an variabel called option 1 — P M, Jan 14 '22 at 12:46
Could you please tell me why you need the variable so badly? you can use an array if you need such a thing. you can just tell me what do you want to do with that variable so I can help you in your scenario. — sajjad rezaei, Jan 14 '22 at 12:51
ok, I try to explain: I want to create a small config page. If a user checks the boxes or unchekcs, some part of an device configruation(text) will be implemeneted in the finished config variable. so for example checkbox1 is checked, create part of the config whichs adds a single vlan: if checkbox 1 checked -> var vlan1 = `config part with vlan 1` if checkbox 02 is checked: var vlan34 = `config part with vlan 34` — P M, Jan 14 '22 at 13:02
your code gives me the ability to see which one was checked or unchecked, now i need an solution to make this part of config, depending on which vlan checkbox is checked — P M, Jan 14 '22 at 13:03
ok, that's clear something. so you can store the command in the check box as an attribute and just get the all command after a save button is clicked. I will edit the answer and you make me know if it's what you mean or not. — sajjad rezaei, Jan 14 '22 at 13:10

Javascript Checkboxes + dedicated variable creation

1 Answers1