Question

0

157

Views

javascript how to save data which is checked in checkbox

I am having trouble to create a button which can detect which checkbox in the row is checked and save data for the checked row.

For example, if I checked the checkbox for row 1&3 in the project below and press the save all button then the input 1&3 should appear number inside.

function save() {
  document.getElementById(1).value = 1;
}

function save2() {
  document.getElementById(2).value = 2;
}

function save3() {
  document.getElementById(3).value = 3;
}

function saveall() {
  //save the input wherever the checkbox is checked
}

<table class="table" border="1">
  <thead>
    <tr>
      <th>Input</th>
      <th><input id="1"></th>
      <th><input type="checkbox"></th>
      <th><button type="submit" onclick="save()">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="2"></th>
      <th><input type="checkbox"></th>
      <th><button onclick="save2()">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="3"></th>
      <th><input type="checkbox"></th>
      <th><button onclick="save3()">save</button></th>
    </tr>
    <button onclick="saveall()">save all</button>
  </thead>
</table>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

You can use an id for each checkbox like you did for each regular input bar

function save(n) {
  document.getElementById(n).value = n;
}
let checkbox1=document.getElementById('ch1')
let checkbox2=document.getElementById('ch2')
let checkbox3=document.getElementById('ch3')

function saveall() {
  if(checkbox1.checked){document.getElementById(1).value=1}
  if(checkbox2.checked){document.getElementById(2).value=2}
  if(checkbox3.checked){document.getElementById(3).value=3}
}

<table class="table" border="1">
  <thead>
    <tr>
      <th>Input</th>
      <th><input id="1"></th>
      <th><input id="ch1" type="checkbox"></th>
      <th><button type="submit" onclick="save(1)">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="2"></th>
      <th><input id="ch2" type="checkbox"></th>
      <th><button onclick="save(2)">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="3"></th>
      <th><input id="ch3" type="checkbox"></th>
      <th><button onclick="save(3)">save</button></th>
    </tr>
    <button onclick="saveall()">save all</button>
  </thead>
</table>

about 4 years ago · Juan Pablo Isaza Report

0

You can do like this as well.

function save(n) {
    let el = document.getElementById(n);
    if(document.getElementById(`ch${n}`).checked)
        el.value = n;
    else
        el.value = "";
}

function saveall() {
    document.querySelectorAll(".table input[type='checkbox'][id^='ch']").forEach(function(el){
        let id = el.attributes.id.value;
        let input_id = id.substring(2, id.length);

        if(el.checked)
            document.getElementById(input_id).value = input_id;
        else
            document.getElementById(input_id).value = "";
    })
}

<table class="table" border="1">
  <thead>
    <tr>
      <th>Input</th>
      <th><input id="1"></th>
      <th><input id="ch1" type="checkbox"></th>
      <th><button type="submit" onclick="save(1)">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="2"></th>
      <th><input id="ch2" type="checkbox"></th>
      <th><button onclick="save(2)">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="3"></th>
      <th><input id="ch3" type="checkbox"></th>
      <th><button onclick="save(3)">save</button></th>
    </tr>
    <button onclick="saveall()">save all</button>
  </thead>
</table>

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T05:49:27.454Z

I just implemented the function saveall() by:

searching for a checked checkboxes;
for each checkbox, searching for a button on the same parent node, and click on it;

As suggested on other comments, you should improve your code:

Your html is not correct. You are using thead, but this is the table body;
You cannot put a strange tag directly on the table (like the button of saveAll);
The ID's should not starts with numbers;
The multiple functions save(), save1(), etc., can be save(inputNumber);

function save() {
  document.getElementById(1).value = 1;
}

function save2() {
  document.getElementById(2).value = 2;
}

function save3() {
  document.getElementById(3).value = 3;
}

function saveall() {
  //save the input wherever the checkbox is checked
  let nodeList = document.querySelectorAll('input:checked');
  nodeList.forEach(node => node.parentNode.parentNode.querySelectorAll('button')[0].click());
}

<table class="table" border="1">
  <thead>
    <tr>
      <th>Input</th>
      <th><input id="1"></th>
      <th><input type="checkbox"></th>
      <th><button type="submit" onclick="save()">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="2"></th>
      <th><input type="checkbox"></th>
      <th><button onclick="save2()">save</button></th>
    </tr>
    <tr>
      <th>Input</th>
      <th><input id="3"></th>
      <th><input type="checkbox"></th>
      <th><button onclick="save3()">save</button></th>
    </tr>
    <button onclick="saveall()">save all</button>
  </thead>
</table>

0

157

javascript how to save data which is checked in checkbox

3 answers

0

0

0

Find remote jobs

Andres GPT