Fatal编程技术网
  • javascript/
  • Javascript 循环检查复选框值以检查其是否已选中

Javascript 循环检查复选框值以检查其是否已选中

javascript html json

Javascript 循环检查复选框值以检查其是否已选中,javascript,html,json,Javascript,Html,Json,我正在做一件事，用户可以输入一些数据、日期、活动和时间。当用户单击add时，它会将其添加到表中。此表包含一个选中的4单元格（复选框）。现在的要点是，用户可以添加许多包含数据的行，然后单击复选框，如果未选中，则不会将其发送到JSON字符串，但选中的行应该被发送 问题是，如果我有一行是绿色的，一行是红色的，那么当我点击send greenmarked data时，它仍然会打印出所有的行 代码如下： <!doctype html> <html lang="en"> <he

我正在做一件事，用户可以输入一些数据、日期、活动和时间。当用户单击add时，它会将其添加到表中。此表包含一个选中的4单元格（复选框）。现在的要点是，用户可以添加许多包含数据的行，然后单击复选框，如果未选中，则不会将其发送到JSON字符串，但选中的行应该被发送

问题是，如果我有一行是绿色的，一行是红色的，那么当我点击send greenmarked data时，它仍然会打印出所有的行

代码如下：

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


表，td{
边框：1px纯黑；
填充：0 40px 0 40px；
}
tr{
背景色：#00FF00；
}
格林先生{
背景色：#00FF00；
}
瑞德先生{
背景色：#FF0000；
}
日期：
行动：
时间：
添加数据！
日期
活动
时间
完成？
发送绿色标记的数据！
函数AddRow（）
{
var$check=document.createElement（“输入”）；
$check.setAttribute（“类型”、“复选框”）；
$check.setAttribute（“checked”、“true”）；
$check.setAttribute（“id”、“checks”）；
$check.addEventListener（“单击”，切换类）；
函数toggleClass（）{
控制台日志（“单击”）；
if（this.checked==true）
{
this.parentNode.parentNode.className=“绿色”；
}
其他的
{
this.parentNode.parentNode.className=“红色”；
}
}
var日期=document.getElementById（“基准”）；
var activity=document.getElementById（“活动”）；
var time=document.getElementById（“时间”）；
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；
insertCell（3）.appendChild（$check）.value；
}
函数addTable（）{
var myTableDiv=document.getElementById（“myDynamicTable”）；
var table=document.createElement（'table'）；
表2.border='1'；
var tableBody=document.createElement（'TBODY'）；
table.appendChild（表体）；

对于（var i=0；i您可以在表中找到所有选中的复选框，然后仅添加带有选中复选框的行的值



函数AddRow（）{
var$check=document.createElement（“输入”）；
$check.setAttribute（“类型”、“复选框”）；
$check.setAttribute（“checked”、“true”）；
$check.setAttribute（“类”、“检查”）；
$check.addEventListener（“单击”，切换类）；
函数toggleClass（）{
if（this.checked==true）{
this.parentNode.parentNode.className=“绿色”；
}否则{
this.parentNode.parentNode.className=“红色”；
}
}
var日期=document.getElementById（“基准”）；
var activity=document.getElementById（“活动”）；
var time=document.getElementById（“时间”）；
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；
insertCell（3）.appendChild（$check）.value；
}
函数addTable（）{
var myTableDiv=document.getElementById（“myDynamicTable”）；
var table=document.createElement（'table'）；
table.border='1'；
var tableBody=document.createElement（'TBODY'）；
table.appendChild（表体）；
对于（变量i=0；i<3；i++）{
var tr=document.createElement（'tr'）；
tableBody.appendChild（tr）；
对于（var j=0；j<4；j++）{
var td=document.createElement（'td'）；
td.宽度='75'；
td.appendChild（document.createTextNode（“单元格”+i+，“+j））；
tr.appendChild（td）；
}
}
myTableDiv.appendChild（表）；
}
函数CheckData（）{
var$arr=[]；
var tb=document.getElementById（“myTable”）；
var checks=tb.querySelectorAll（“.checks”），
chk，tr；
对于（变量i=0；i


表格，
运输署{
边框：1px纯黑；
填充：0 40px 0 40px；
}
tr{
背景色：#00FF00；
}
格林先生{
背景色：#00FF00；
}
瑞德先生{
背景色：#FF0000；
}



日期：
行动：
时间：
添加数据！
日期
活动
时间
完成？
发送绿色标记的数据！

可能的重复项您是否检查了右侧的一些“相关”链接？这里还有另一个示例：非常感谢！您救了我一天：）@初学者JavaScript，您可以使用与添加其他2个值相同的方式添加其他值：）我看到了：）Ty再次快速回答：）