I am creating a questionnaire and to be inserted in database. I'm doing Multiple Choices type. I am in a part where choosing a choices for a correct answer.
I wan't to change the border color of choices inputs if the value is equal to correct input and make other border color black if it's not equal to correct input,
but what happening to my code is, the border style of other choices that are not equal to the correct input stays greens, also my code is not so good i think there is a better way to make it much more clean and optimize.
This is what i have tried so far, but I'm not happy about it. I'm sure there's much better approach for this kind of code.
const inp = document.querySelectorAll("#choices input");
const inpCorrect = document.querySelector("#correct");
inp.forEach(x => {
x.addEventListener("click", function () {
inpCorrect.value = this.value;
})
x.addEventListener("keyup", function () {
inpCorrect.value = this.value;
this.value == inpCorrect.value ? this.style.border = '2px solid green' : this.style.border = '2px solid black';
})
})
#choices {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
}
input {
outline: none;
}
<div id="choices">
<div><label for="correct">Choices A:</label>
<input type="text" id="choicesA"></div>
<div><label for="correct">Choices B:</label>
<input type="text" id="choicesB"></div>
<div><label for="correct">Choices C:</label>
<input type="text" id="choicesC"></div>
<div><label for="correct">Choices D:</label>
<input type="text" id="choicesD"></div>
</div>
<br>
<br>
<label for="correct">Correct Answer:</label>
<input type="text" id="correct">
It's not quite clear what you mean. Typically multiple choice questions are answered by selecting one of the given answers, not by typing an answer.
Here's a snippet for a multiple choice question, maybe that helps? It uses data-attributes to retain the values, event delegation for the handler and some css for the styling.
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`choice`)) {
document.querySelectorAll(`.choice`).forEach(choice =>
choice.classList.remove(`correct`, `incorrect`));
const valueElem = evt.target.closest(`[data-value]`);
if (valueElem.dataset.value === document.querySelector(`#correct`).value) {
return valueElem.classList.add(`correct`);
}
return valueElem.classList.add(`incorrect`);
}
}
#choices {
display: flex;
flex-direction: column;
max-width: 25vw;
gap: 5;
}
[data-question]:before {
content: attr(data-question);
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 0.7rem;
width: 80vw;
}
.choice {
cursor: pointer;
border: 2px solid transparent;
padding: 3px;
}
.choice.correct {
border: 2px solid green;
}
.choice.incorrect {
border: 2px solid red;
}
<div id="choices" data-question="How many items do we find in a dozen?">
<div class="choice" data-value="144">A. 144</span></div>
<div class="choice" data-value="12">B. 12</span></div>
<div class="choice" data-value="24">C. 24</span></div>
<div class="choice" data-value="33">D. 33</span></div>
<input type="hidden" id="correct" value="12">
</div>
After your comments: loop the relevant input elements, compare them to the given correct value and colorize the border if the input value matches the correct value.
Play with this code #Stackblitz
document.addEventListener(`keyup`, handle);
function markCorrect(correctAnswer) {
const correct = value => value !== `` && value === correctAnswer;
document.querySelectorAll(`[data-answer]`)
.forEach(inp => correct(inp.value.trim()) ?
inp.classList.add(`correct`) :
inp.classList.remove(`correct`));
}
function handle(evt) {
if (evt.target.closest(`.choiceEdit`)) {
return markCorrect(document.querySelector(`#correctAnswer`).value);
}
}
.inp {
margin: 0.5rem auto;
}
.choice {
cursor: pointer;
border: 2px solid transparent;
padding: 3px;
}
input {
outline: none;
}
input.correct {
border: 2px solid green;
}
<div id="choices">
<div class="inp">
<input type="text" id="question" class="nocolor" value="How many is a dozen?"> The question
</div>
<div class="inp choiceEdit">
<input type="text" id="correctAnswer" value="12"> The correct answer
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="a"> Answer A
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="b"> Answer B
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="c"> Answer C
</div>
<div class="inp choiceEdit">
<input type="text" data-answer="d"> Answer D
</div>
</div>
There are several issues with this code.
First: by assigning inpCorrect.value = this.value; you are ensuring that the value of the "correct" input will be changed every time any input receives a keyup or click event. If you are always changing the "correct" value to match the current value, then the current value will always seem correct. I am not really sure what you are going for with setting this, so I have removed those lines.
Second: It's not really a good idea to do assignment in a ternary (x = something ? foo : bar) conditional expression. Expressions like these should evaluate to a result, and not execute side effects.
Is this closer to the behavior you're looking for?
const inp = document.querySelectorAll("#choices input");
const inpCorrect = document.querySelector("#correct");
inp.forEach(x => {
x.addEventListener("keyup", function () {
if (this.value == inpCorrect.value) {
this.style.border = '2px solid green';
} else {
this.style.border = '2px solid black';
}
})
})
#choices {
display: flex;
flex-direction: column;
width: 50%;
gap: 20px;
}
input {
outline: none;
}
<div id="choices">
<div><label for="correct">Choices A:</label>
<input type="text" id="choicesA"></div>
<div><label for="correct">Choices B:</label>
<input type="text" id="choicesB"></div>
<div><label for="correct">Choices C:</label>
<input type="text" id="choicesC"></div>
<div><label for="correct">Choices D:</label>
<input type="text" id="choicesD"></div>
</div>
<br>
<br>
<label for="correct">Correct Answer:</label>
<input type="text" id="correct">
Related
I have the following code :
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding-left:70px;}
h1{padding:50px; color:blue}
#body {border:5px solid black;}
<form name="form1">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10>
</textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
I need to copy the text entered in textbox and paste in the textarea. But the text is displayed and erased immediately like blinking. I want that to be displayed permanently.
Please guide me!
<button>s, by default are type="submit", so clicking is submitting your form. Add type="button" to your button.
Here's a working version. I think your issue was that buttons within a form will default to type submit if no type is specified.
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
function formSubmitted(e) {
// Handle form submit, if needed
return false;
}
function next_task() {
// Not yet implemented
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding: 1rem;
}
h1{
padding: 1rem;
margin: 0;
color: blue;
}
#body {
border: 5px solid black;
}
<header>
<h1>To Do list</h1>
</header>
<form name="form1" onsubmit="return formSubmitted(event)">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10></textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.
There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>
I am writing a toggle in pure JavaScript.
There are 2 input fields, 1 is hidden and the other is visible. When we click on the first 1, the second input should appear and when both of the input fields are visible and one of the input fields is clicked then that input field should display:block and the other input field should display:none. Also, the latest clicked input element should remain on top and the other one below it. (es6 would be also good)
if anyone knows please check ?
code
<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww" placeholder="Type "></form>
<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1" placeholder="Type "></form>
body{
background:#873e66;
}
.input-bg{
background:white;
border:none;
color:black;
height:50px;
text-indent:15px;
width:500px;
border-radius:26px;
outline:none;
}
.neww1{
margin-top:5px;
}
::-webkit-input-placeholder {
color: black;
}
::-moz-placeholder {
color: black;
}
:-ms-input-placeholder {
color: black;
}
.neww1{
display:none;
}
function toggleClass(element, className){
if (!element || !className){
return;
}
var classString = element.className, nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
}
element.className = classString;
}
Thanks!
you can proceed like :
const inputs = [].slice.call(document.getElementsByClassName("input-bg"));
inputs.forEach((input) => {
console.log()
input.addEventListener("click", (event) => {
const somehidden = inputs.filter((_input) => {
return _input.getAttribute("class").match(/neww1/i);
})
if (somehidden.length > 0) {
somehidden[0].classList.remove("neww1");
} else {
inputs.forEach((i) => {
if (i !== event.target)
i.classList.add("neww1");
});
}
});
});
body {
background: #873e66;
}
.grid {
display: grid;
grid-template-areas: "up" "down";
}
form:focus-within {
grid-area: up;
}
.input-bg {
background: white;
border: none;
color: black;
height: 50px;
text-indent: 15px;
width: 500px;
border-radius: 26px;
outline: none;
}
.neww1 {
margin-top: 5px;
}
::-webkit-input-placeholder {
color: black;
}
::-moz-placeholder {
color: black;
}
:-ms-input-placeholder {
color: black;
}
.neww1 {
display: none;
}
<div class="grid">
<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww" placeholder="Type "></form>
<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1" placeholder="Type2 "></form>
</div>
Although your requirement is not very clear but my answer might be of some help
Let's say we have two input fields like this:
<div class="input-container">
<input type="password" placeholder="Input 1" class="myInput first" />
<input type="password" placeholder="Input 2" class="myInput second hidden" />
</div>
CSS can be like:
.input-container {
display: flex;
flex-direction: column;
}
.myInput {
margin: 10px;
padding: 5px
}
.first {
order: 1;
}
.second {
order: 2;
}
.hidden {
display: none;
}
Now the toggle function (JS):
var allInputs = document.querySelectorAll('.myInput');
allInputs.forEach(function(node) {
node.addEventListener("click", function(){
var allHiddenInputs = document.querySelectorAll('.hidden');
if(allHiddenInputs.length === 0) {
allInputs.forEach(function(input) {
input.classList.add("hidden");
input.classList.add("second");
input.classList.remove("first");
});
node.classList.remove("hidden");
node.classList.remove("second");
node.classList.add("first");
} else {
allHiddenInputs.forEach(function(input) {
input.classList.remove("hidden");
});
}
});
});
https://codepen.io/tusharshukla/pen/rrqvQz?editors=1010
Something like this could help you. I'm directly changing the CSS but you can also toggle classes using the classList.
<html>
<body>
<form action="#" class="navbar-top" role="search" autocomplete="off">
<input name="p" id="input1" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww"
placeholder="Input One ">
</form>
<form action="#" class="navbar-top" role="search" autocomplete="off">
<input name="p" id="input2" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1"
placeholder="Input Two ">
</form>
<script>
(function () {
const inputOne = document.getElementById('input1');
const inputTwo = document.getElementById('input2');
const handleClick = i => (i === inputOne ? inputTwo : inputOne)
.style.display = 'none';
const handleBlur = i => {
if (i === inputOne) {
inputTwo.style.display = 'block';
inputOne.style.display = 'none';
} else {
inputTwo.style.display = 'none';
inputOne.style.display = 'block';
}
}
[inputOne, inputTwo].forEach((i) => {
i.addEventListener('click', () => handleClick(i))
i.addEventListener('focusout', () => handleBlur(i))
});
})();
</script>
</body>
</html>
You have the classList attribute with your HTML Element.
So first you need the element reference, you can use your constructor and private variables and set the private variable with document.getElementByClassName according to initial state of your page, or set an ID. Let's take for example an ID :
<form onclick="toggleClass()" id="password1" action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww" placeholder="Type "></form>
<form onclick="toggleClass()" id="password2" action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1" placeholder="Type "></form>
Then just find the reference
const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");
and after that, you can write this function :
function toggleClass() {
const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");
if (password1.classList.contains('hidden')){
password1.classList.remove('hidden');
password2.classList.add('hidden');
}
else {
password2.classList.remove('hidden');
password1.classList.add('hidden');
}
}
.neww1 {
background-color : red;
}
.neww {
background-color : green;
}
.hidden {
display:none;
}
input {
margin:5px;
}
I am making a unit converter with two input fields, one for centimeters and the other for inches. I was wondering if it would be possible for one of the fields to be changed to read only if there is input in the other field. Here is my code for one of the fields:
<input name="cm" class="inputs peach Calibri" type="number" min="0" step="1" />.
Any help would be appreciated. Thanks!
This would be a fairly good starting point.
let cmInput = document.getElementById("cminput");
let inInput = document.getElementById("inchinput");
cmInput.onkeyup = function(){
if(cmInput.value !== ""){
inInput.disabled = true;
}else{
inInput.disabled = false;
}
};
inInput.onkeyup = function(){
if(inInput.value !== ""){
cmInput.disabled = true;
}else{
cmInput.disabled = false;
}
};
<input type="text" placeholder="centimetres" id="cminput">
<input type="text" placeholder="inches" id="inchinput">
Not the cleanest way but it works just add your logic for conversion. This also remove readonly attr when input field is empty
jsfiddle (click me)
<label for="cm">cm: </label>
<input name="cm" id="cm" class="inputs peach Calibri" type="number" min="0" step="1" />
<label for="inch">inch: </label>
<input name="inch" id="inch" class="inputs peach Calibri" type="number" min="0" step="1" />
$('#cm').on('keyup', function() {
if ($('#cm').val() != '') {
$('#inch').prop('readonly', true);
} else if ($('#cm').val() == '') {
$('#inch').prop('readonly', false);
}
});
$('#inch').on('keyup', function() {
if ($('#inch').val() != '') {
$('#cm').prop('readonly', true);
} else if ($('#inch').val() == '') {
$('#cm').prop('readonly', false);
}
});
would you consider another pattern for this?
The readonly solution is pretty straigh forward, but a lot of sites with not only numeric convertion, for example, google translate, use a button to switch the convertion leaving the right side of the converter control with a read only, so if you want to make something like this in order to follow a more standart pattern
here it is
$('button').on('click',function(){
$('.cont').toggleClass('invert')
});
$('input').on('keypress',function(){
if($('.cont').hasClass('invert')){
// some convertion code for INCH to CM
}else{
// some convertion code for CM to INCH
}
});
.cont{
display:flex;
align-items: center;
justify-content: center;
border:1px solid silver;
}
.cont.invert{
flex-direction: row-reverse;
}
fieldset{
border:none;
position:relative;
}
button{
display: block;
line-height: 22px;
}
.cont.invert fieldset:first-child:after{
content:"";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
background-color: rgba(255,255,255,.3);
}
.cont.invert fieldset:last-child:after{
display: none;
}
.cont fieldset:last-child:after{
content:"";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
background-color: rgba(255,255,255,.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<fieldset>
<label for="inp1">CM</label>
<br>
<input type="text">
</fieldset>
<button>
< >
</button>
<fieldset>
<label for="inp1">INCH</label>
<br>
<input type="text">
</fieldset>
</div>
As you can see, i did not disabled the input, i used a block to cover it from editing, the block on top of the right input has a white background with alpha on it, this way, if you want, you can control the way of the "disabled" one, no touching the input´s css and may looks the same on every browser.
Hope this helps
You could call a js function oninput like so:
<input type="text" id="cm" oninput="input('cm')"/>
<input type="text" id="inch" oninput="input('inch)"/>
function input(which){
if(which === 'cm'){
if(document.getElementById('cm').value!= ''){
document.getElementById('inch').disabled = true;
}else{
document.getElementById('cm').disabled = false;
}
}else{
if(document.getElementById('inch').value!= ''){
document.getElementById('cm').disabled = true;
}else{
document.getElementById('inch').disabled = false;
}
}
}
I want to change background of checkbox without using jQuery (if is that possible of course), because I'm not familiar with that library.
HTML:
<form name="checkBox">
<input onchange="checkbox()" type="checkbox" class="cbox" />
</form>
JS:
function checkbox(){
var checkbox = document.getElementByClass('cbox');
if(document.getElementById('cbox').checked === true){
checkbox.style.background = "url('uncheck.png')";
}else{
checkbox.style.background = "url('check.png')";
}
}
You are mixing class names and ID's. Try this.
HTML:
<form name="checkBox">
<input onchange="checkbox()" type="checkbox" id="cbox" />
</form>
JS:
function checkbox(){
var checkbox = document.getElementById('cbox');
if(checkbox.checked === true){
checkbox.style.background = "url('uncheck.png')";
}else{
checkbox.style.background = "url('check.png')";
}
}
How about a pure CSS solution without any need to use images: http://jsfiddle.net/7qcE9/1/.
HTML:
<form name="checkBox">
<input type="checkbox" id = "checkbox1" />
<label for = "checkbox1"></label>
</form>
CSS:
form > input[type = "checkbox"] {
display: none;
}
form > label {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 3px;
font-size: 20px;
text-align: center;
cursor: pointer;
}
form > input[type = "checkbox"]:checked + label:before {
content:'\2714';
}
You can pass a reference to the checkbox using this in the inline handler as follows:
html
<form name="checkBox">
<input onchange="checkbox(this)" type="checkbox" class="cbox" />
</form>
js
function checkbox(elm){ // elm now refers to the checkbox
if(elm.checked === true){
elm.style.background = "url('uncheck.png')";
}else{
elm.style.background = "url('check.png')";
}
}
So that you can use the function for n number of elements.