遍歷復選框值以檢查其是否已選中

Question

我正在做的事情是，用戶可以輸入一些數據，日期，活動和時間。 當用戶單擊添加時，它將添加到表中。 該表包含一個已選中的4單元格（復選框）。 現在的要點是，用戶可以添加很多行數據，然后單擊復選框，如果未選中該復選框，則不會將其發送到JSON字符串，但是應該發送選中的行！

問題是如果我單擊發送綠色標記的數據時，如果我有1行就是綠色和1行就是紅色，它仍然打印出所有行。

下面是代碼：

<!doctype html>
<html lang="en">
<head>
<style>
table, td {
border: 1px solid black;
padding: 0 40px 0 40px;
}

tr {
background-color: #00FF00;
}

.Green {
background-color: #00FF00;
}

.Red {
background-color: #FF0000;
}

</style>
<meta charset="utf-8">

</head>
<body>

<form>
Date: <input type="text" id="Datum" name="Date">
Activ: <input type="text" id="Activity" name="Activ">
Time: <input type="text" id="time" name="Time">
</form>

<button onclick="AddRow()">Add Data!</button>



<table id="myTable">
<tr>        
    <td>Date</td>
    <td>Activity</td>
    <td>Time</td>
    <td>Done?</td>
</tr>
</table>

<button id="buttonforsend" onclick="SendData()">Send greenmarked data!      </button> 


 <script>

 function AddRow() 
 {

  var $check = document.createElement("INPUT");
  $check.setAttribute("type", "checkbox");
  $check.setAttribute("checked", "true");
  $check.setAttribute("id", "checks");
  $check.addEventListener("click", toggleClass);

  function toggleClass() {
  console.log("clicked");

   if (this.checked == true) 
  {
  this.parentNode.parentNode.className = "Green";  

  }
  else 
{
this.parentNode.parentNode.className = "Red";
}

}

var date = document.getElementById("Datum");
var activity = document.getElementById("Activity");
var time = document.getElementById("time");

var table = document.getElementById("myTable");

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);


row.insertCell(0).innerHTML= date.value; 
row.insertCell(1).innerHTML= activity.value; 
row.insertCell(2).innerHTML= time.value;
row.insertCell(3).appendChild($check).value;

}

function addTable() {

var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border='1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

for (var i=0; i<3; i++){
   var tr = document.createElement('TR');
   tableBody.appendChild(tr);

   for (var j=0; j<4; j++){
       var td = document.createElement('TD');
       td.width='75';
       td.appendChild(document.createTextNode("Cell " + i + "," + j));
       tr.appendChild(td);
   }
}
myTableDiv.appendChild(table);

}
function CheckData() {

var $arr = [];

var tb = document.getElementById("myTable"); 

var check = document.getElementById("checks");

for (var i = 0, row; row = tb.rows[i]; i++) {  

for (var j = 0, col; col = row.cells[j]; j++) {  

  if(check.checked == true) {
    $arr.push(col.firstChild.nodeValue);
  }

 }    
 } 
 return $arr;
 }


 function SendData() 
 {

 var obj = {test: CheckData()}; 
 var jsonString = "jsonString=" + (JSON.stringify(obj));
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("POST","JSON_H.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-  urlencoded");
 xmlhttp.setRequestHeader("Content-Length", jsonString.length);

 xmlhttp.onreadystatechange = function() 
 {           
  if(xmlhttp.readyState === 4 && (xmlhttp.status === 200)){
      alert(xmlhttp.responseText);
  } 
  };
 xmlhttp.send(jsonString);
 }
 </script>

 </body>
 </html>

Answer 1

您可以在表中找到所有選中的復選框，然后僅添加帶有選中復選框的行的值

 function AddRow() { var $check = document.createElement("INPUT"); $check.setAttribute("type", "checkbox"); $check.setAttribute("checked", "true"); $check.setAttribute("class", "checks"); $check.addEventListener("click", toggleClass); function toggleClass() { if (this.checked == true) { this.parentNode.parentNode.className = "Green"; } else { this.parentNode.parentNode.className = "Red"; } } var date = document.getElementById("Datum"); var activity = document.getElementById("Activity"); var time = document.getElementById("time"); var table = document.getElementById("myTable"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); row.insertCell(0).innerHTML = date.value; row.insertCell(1).innerHTML = activity.value; row.insertCell(2).innerHTML = time.value; row.insertCell(3).appendChild($check).value; } function addTable() { var myTableDiv = document.getElementById("myDynamicTable"); var table = document.createElement('TABLE'); table.border = '1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < 3; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < 4; j++) { var td = document.createElement('TD'); td.width = '75'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } myTableDiv.appendChild(table); } function CheckData() { var $arr = []; var tb = document.getElementById("myTable"); var checks = tb.querySelectorAll(".checks"), chk, tr; for (var i = 0; i < checks.length; i++) { chk = checks[i]; if (chk.checked) { tr = chk.closest ? chk.closest('tr') : chk.parentNode.parentNode; $arr.push({ date: tr.cells[0].innerText, activity: tr.cells[1].innerText }); } } return $arr; } function SendData() { var obj = { test: CheckData() }; var jsonString = "jsonString=" + (JSON.stringify(obj)); document.getElementById('jsonString').innerHTML = jsonString; return; // for testing var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "JSON_H.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); xmlhttp.setRequestHeader("Content-Length", jsonString.length); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState === 4 && (xmlhttp.status === 200)) { alert(xmlhttp.responseText); } }; xmlhttp.send(jsonString); }

 table, td { border: 1px solid black; padding: 0 40px 0 40px; } tr { background-color: #00FF00; } .Green { background-color: #00FF00; } .Red { background-color: #FF0000; }

 <form> Date: <input type="text" id="Datum" name="Date">Activ: <input type="text" id="Activity" name="Activ">Time: <input type="text" id="time" name="Time"> </form> <button onclick="AddRow()">Add Data!</button> <table id="myTable"> <tr> <td>Date</td> <td>Activity</td> <td>Time</td> <td>Done?</td> </tr> </table> <button id="buttonforsend" onclick="SendData()">Send greenmarked data!</button> <pre id="jsonString"></pre>

由於元素的id必須唯一，因此checkbox的id屬性更改為class

遍歷復選框值以檢查其是否已選中

問題描述

1 個解決方案

解決方案1
0 已采納 2015-12-16 11:35:50

遍歷復選框值以檢查其是否已選中

問題描述

1 個解決方案

解決方案1 0 已采納 2015-12-16 11:35:50

解決方案1
0 已采納 2015-12-16 11:35:50