遍历复选框值以检查其是否已选中

Question

I am working on a thing there a user can input some data, date, activity, and time. 我正在做的事情是，用户可以输入一些数据，日期，活动和时间。 And when the user clicks on add, it adds it to a table. 当用户单击添加时，它将添加到表中。 This table contains a 4 cell (checkbox) that is checked. 该表包含一个已选中的4单元格（复选框）。 Now the point is that a user can add many rows with data and then click on the checkbox, if its unchecked it will not be send to JSON string, but the rows that are checked should be send! 现在的要点是，用户可以添加很多行数据，然后单击复选框，如果未选中该复选框，则不会将其发送到JSON字符串，但是应该发送选中的行！

The problem is if i have 1 row thats green and 1 row thats red its still print out all the rows when i click on send greenmarked data. 问题是如果我单击发送绿色标记的数据时，如果我有1行就是绿色和1行就是红色，它仍然打印出所有行。

Below is the code: 下面是代码：

<!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

You can find all the checked checkboxes in the table, and then add only the values of rows with a checked checkbox 您可以在表中找到所有选中的复选框，然后仅添加带有选中复选框的行的值

 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>

Since, id of an element must be unique, the id attribute of checkbox is changed to class 由于元素的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