javascript如何保存復選框中選中的資料

我無法創建一個按鈕，該按鈕可以檢測該行中的哪個復選框被選中并為選中的行保存資料。

例如，如果我在下面的專案中選中了第 1 行和第 3 行的復選框并按下全部保存按鈕，那么輸入的 1&3 應該出現在里面。

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>

uj5u.com熱心網友回復：

我剛剛通過以下方式實作了該功能saveall()：

• 搜索選中的復選框；
• 對于每個復選框，在同一父節點上搜索一個按鈕，然后單擊它；

正如其他評論所建議的那樣，您應該改進您的代碼：

• 您的 html 不正確。您正在使用thead，但這是表格主體；
• 您不能直接在table（如buttonsaveAll 的）上放置一個奇怪的標簽；
• ID不應以數字開頭；
• 多種功能save()，save1()等，可以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>

uj5u.com熱心網友回復：

您可以id像對每個常規輸入欄一樣使用每個復選框

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>

uj5u.com熱心網友回復：

你也可以這樣做。

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>

uj5u.com熱心網友回復：

 localStorage.setItem("", JSON.stringify())
JSON.parse(localStorage.getItem("", JSON.stringify()
event.preventdefault()
variable = JSON.parse(localStorage.getItem("")) || [];

第一行會將您的資料發送到本地存盤第二行將獲取它第三行以防止默認第四行用于防止 null

標籤：javascript

上一篇：在嵌入中使用畫布設定影像

下一篇：如果我在設定后設定為未定義，為什么process.env.WHATEVER!==未定義？