JavaScript - Hinzufügen/Löschen/Bearbeiten von Zeilen mit Kontrollkästchen

Question

Ich verwende JavaScript zum Hinzufügen/Löschen/Bearbeiten von Zeilen. Die Zeile enthält 2 Textfelder und Kontrollkästchen. Wenn ich auf Bearbeiten klicke, kann ich den Wert der Textbox ändern, aber für die Checkbox kann ich das nicht und auch beim Klicken auf Speichern wird der Wert der Checkbox nicht richtig gespeichert. Können Sie mir bitte helfen, den Fehler im Skript zu finden?

Below html ist

<div id="wrapper5"> 
    <table align='center' cellspacing=2 cellpadding=5 id="data_table5" border=1> 

    <tr> 
    <th>Assessment Code</th>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    <th>Description</th> 
    <th>Is Exam?<th> 
    </tr> 

    <tr> 
    <td><input type="text" id="new_ascode"></td> 
    <td><input type="text" id="new_asname"></td> 
    <td><input type="checkbox" id="new_asexam"></td> 
    <td><input type="button" class="add" onclick="asadd_row();" value="Add Row"></td> 
    </tr> 

    </table> 
</div> 

Im Folgenden finden Sie JavaScript:

function asedit_row(no) 
{ 
document.getElementById("asedit_button"+no).style.display="none"; 
document.getElementById("assave_button"+no).style.display="block"; 

var ascode=document.getElementById("ascode_row"+no); 
var asname=document.getElementById("asname_row"+no); 
var asexam=document.getElementById("asexam_row"+no); 

var ascode_data=ascode.innerHTML; 
var asname_data=asname.innerHTML; 
var asexam_data=asexam.innerHTML; 


ascode.innerHTML="<input type='text' id='ffcode_text"+no+"' value='"+ascode_data+"'>"; 
asname.innerHTML="<input type='text' id='ffname_text"+no+"' value='"+asname_data+"'>"; 
asexam.innerHTML="<input type='checkbox' id='asexam_text"+no+"' value='"+asexam_data+"'>"; 
} 

function assave_row(no) 
{ 
var ascode_val=document.getElementById("ascode_text"+no).value; 
var asname_val=document.getElementById("asname_text"+no).value; 
var asexam_val=document.getElementById("asexam_text"+no).value; 

document.getElementById("ascode_row"+no).innerHTML=ascode_val; 
document.getElementById("asname_row"+no).innerHTML=asname_val; 
document.getElementById("asexam_row"+no).innerHTML=asexam_val; 

document.getElementById("asedit_button"+no).style.display="block"; 
document.getElementById("assave_button"+no).style.display="none"; 
} 

function asdelete_row(no) 
{ 
document.getElementById("row"+no+"").outerHTML=""; 
} 

function asadd_row() 
{ 
var new_ascode=document.getElementById("new_ascode").value; 
var new_asname=document.getElementById("new_asname").value; 
var new_asexam=document.getElementById("new_asexam").value; 


var table=document.getElementById("data_table5"); 
var table_len=(table.rows.length)-1; 
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='ascode_row"+table_len+"'>"+new_ascode+"</td><td id='asname_row"+table_len+"'>"+new_asname+"</td><td id='asexam_row"+table_len+"'>"+new_asexam+"</td><td><input type='button' id='asedit_button"+table_len+"' value='Edit' class='edit' onclick='asedit_row("+table_len+")'> <input type='button' id='assave_button"+table_len+"' value='Save' class='save' onclick='assave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='asdelete_row("+table_len+")'></td></tr>"; 

document.getElementById("new_ascode").value=""; 
document.getElementById("new_asname").value=""; 
document.getElementById("new_asexam").value=""; 
} 

Answer 1

new_asexam=document.getElementById("new_asexam").value 

geändert werden soll:

new_asexam=document.getElementById("new_asexam").checked 

Dann werden Sie entweder true oder false gespeichert in new_asexam erhalten und mit der Logik nach Ihren Bedürfnissen fortsetzen kann.

Here is a working example.

Answer 2

Sie versuchen, das Attribut value aus dem Kontrollfeld zu bekommen, aber that is not how it works. Dies ist eine gesichtete Checkbox:

<input name="name" id="id" type="checkbox" checked="checked">