How do you check whether a check box is checked or not

Question

I'm Making a points application. How would I check whether or not the check box is checked and if it is how do I get it to add 10, if it is not checked I want it to do nothing. Here is the JavaScript. JS

if (localStorage.getItem("studentList") === null) {
    localStorage.setItem("studentList", JSON.stringify([]));
}

studentList = JSON.parse(localStorage.getItem("studentList"));

function save() {
    newStudent = {
        "firstname": document.getElementById('sFirstName').value,
        "lastname": document.getElementById('sLastName').value,
        "studentnumber": document.getElementById('sNumber').value,
        "points": document.getElementById('sPoints').value
    };  

    studentList.push(newStudent);
    localStorage.setItem("studentList", JSON.stringify(studentList));
};
table = document.getElementById("attendance");
for (i = 0; i < studentList.length; i++) {
    row = table.insertRow(i + 1);
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell4 = row.insertCell(3);
    cell5 = row.insertCell(4);

    cell1.innerHTML = studentList[i].firstname;
    cell2.innerHTML = studentList[i].lastname;
    cell3.innerHTML = studentList[i].studentnumber;
    cell4.innerHTML = studentList[i].points;
    cell5.innerHTML = "<input type=checkbox>";
}


function userName() { //this function takes values from the text box and stores them in objects

    var studentList = {
        studentNumber: document.getElementById("newUser").value + index,
        lastName: document.getElementById("newlName").value + index,
        firstName: document.getElementById("newfName").value + index

    };
}

and here's a JSfiddle: https://jsfiddle.net/RandomRainbow7/Lm574foy/ The fiddle won't show a person so if you want to hardcode it in do that otherwise heres the other html page.

<!DOCTYPE html> 
<head>
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
<script src="function.js"></script>
</head>
<header>
    <nav>
        <img src="logo.jpg"><h1 id="titt">North Park Clubs</h1>
    <li>
        <a href="attendance.html">Attendance</a>
        <a href="addStudent.html">Add Student</a>
        </li>
    </nav>
</header> 
<body>
<h1>Add A Student</h1>
    <input type="text" id="sFirstName" placeholder="First Name"></input>
    <input type="text" id="sLastName" placeholder="Last Name"></input>
    <input type="text" id="sNumber" placeholder="Student Number"></input>
    <input type="text" id="sPoints" placeholder="Points"></input>
    <input type="button" id="checkbox"onclick="save()" value="Save"></input>

</body>

score 0 · Answer 1 · answered Jun 15 '15 at 02:44

You can store the informatation of 'being absent' along with the other information of the student in the json object:

Store it in the save() function:

newStudent = {
    "firstname": document.getElementById('sFirstName').value,
    "lastname": document.getElementById('sLastName').value,
    "studentnumber": document.getElementById('sNumber').value,
    "points": document.getElementById('sPoints').value,

    "absent": document.getElementById('sAbsent').checked
};

Read it in the for-loop for the table:

cell1.innerHTML = studentList[i].firstname;
cell2.innerHTML = studentList[i].lastname;
cell3.innerHTML = studentList[i].studentnumber;
cell4.innerHTML = studentList[i].points;

cell5.innerHTML = "<input type=checkbox" + (studentList[i].absent === true) ? "checked>" : ">";
}

Write it in the HTML under <h1>Add A Student</h1>:

<input type="checkbox" id="sAbsent"></input>

How do you check whether a check box is checked or not

1 Answers1