April 6, 2019
jQuery Challenge #1 – Toggle Multiple Checkboxes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="all" id="all" value="all"> <label for="all">All</label>
<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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="all" id="all" value="all"> <label for="all">All</label>
<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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="all" id="all" value="all"> <label for="all">All</label>
<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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function (){
$('#all').click(function (){
const isChecked = $(this).prop('checked');
$('input').each(function (){
$(this).prop('checked', isChecked);
});
});
$('input:not(#all)').click(function (){
$('#all').prop('checked', false);
});
});
