April 9, 2019

Javascript Challenge #1: Toggle Multiple Checkboxes

By Krishnaa JavaScript Questions 0 Comments

This is continuation of previous challenge. Previous challenge was about jquery and we are converting same code into javascript.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<input type="checkbox" name="apple" id="apple" value="apple"> <label for="apple">Apple</label>

<input type="checkbox" name="orange" id="orange" value="orange"> <label for="orange">Orange</label>

<input type="checkbox" name="mango" id="mango" value="mango"> <label for="mango">Mango</label>

<input type="checkbox" name="grapes" id="grapes" value="grapes"> <label for="grapes">Grapes</label>

</body>

</html>

const all = document.getElementById('all');

all.addEventListener('click', toggle);

function toggle(){

const isChecked = all.checked;

Array.from(document.getElementsByTagName('input')).forEach(element =>{

element.checked = isChecked;

});

}

Array.from(document.querySelectorAll('input:not(#all)')).forEach(element =>{

element.addEventListener('click', uncheckAll);

});

function uncheckAll(){

all.checked = false

}