Toggling multiple password fields

<form>
	<div>
		<label for="current-password">Current Password</label>
		<input type="password" name="current-password" id="current-password" data-password>
	</div>

	<div>
		<label for="new-password">New Password</label>
		<input type="password" name="new-password" id="new-password" data-password>
	</div>

	<div>
		<label for="show-passwords">
			<input type="checkbox" name="show-passwords" id="show-passwords">
			Show passwords
		</label>
	</div>

	<p>
		<button type="submit">Change Passwords</button>
	</p>
</form>

<script async>

	// Variables
	var passwords = Array.prototype.slice.call(document.querySelectorAll('[data-password]'));
	var passwordToggle = document.querySelector('#show-passwords');

	// Methods
	var togglePasswords = function (event) {
		if (event.target != passwordToggle) return;
		passwords.forEach(element => {
			element.type = passwordToggle.checked ? 'text' : 'password';
		});
	};

	// Listeners
	document.addEventListener('click', function (event) {
		togglePasswords(event);
	});

</script>

Other ideas

type=password could instead have been used as a selector.
Array.from() could replace the Array.prototype.slice.call().

Or with a pure function

function togglePassword (checkbox, field) {
  field.type = checkbox.checked ? 'text' : 'password';
}

function handleChange () {
  passwords.forEach(password => {
    togglePassword(this, password);
  });
}