codingwithsara/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>チェックボックスの値取得</title>
    <style>
        .container {
            width: 300px;
            margin: 100px auto;
            font-size: 20px;
        }
        button {
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="checkbox" class="checks" value="あいうえお"> あ____<br>
        <input type="checkbox" class="checks" value="かきくけこ"> か_____<br>
        <input type="checkbox" class="checks" value="さしすせそ"> さ_____<br>
        <button onclick="getValue()">値を取得</button>
    </div>

    <script>
        function getValue() {
            var checks = document.getElementsByClassName('checks');
            var str = '';

            for ( i = 0; i < 3; i++) {
                if ( checks[i].checked === true ) {
                    str += checks[i].value + " ";
                }
            }
            alert(str);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>チェックボックスの値取得</title>
	<style>
	.container {
	width: 300px;
	margin: 100px auto;
	font-size: 20px;
	}
	button {
	margin-top: 40px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<input type="checkbox" class="checks" value="あいうえお"> あ____<br>
	<input type="checkbox" class="checks" value="かきくけこ"> か_____<br>
	<input type="checkbox" class="checks" value="さしすせそ"> さ_____<br>
	<button onclick="getValue()">値を取得</button>
	</div>

	<script>
	function getValue() {
	var checks = document.getElementsByClassName('checks');
	var str = '';

	for ( i = 0; i < 3; i++) {
	if ( checks[i].checked === true ) {
	str += checks[i].value + " ";
	}
	}
	alert(str);
	}
	</script>
	</body>
	</html>