postnote
 コードテスト2 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数チェック{ックスの反映 - 2分割レイアウト</title>
<style>
/* 基{設定: htmlとbodyの高さを100%にし、デフォルトの}ージン・パディングを削除 */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* スクロールバーが不要なら */
}

/* レイアウトのスタイル */
#container {
display: flex;
/* justify-content: space-between; */ /* 幅で制御するので不要かも */
height: 100vh; /* ビューポートの高さ全体を使用 */
padding: 20px;
box-sizing: border-box; /* paddingを含めて高さを計算 */
}

#checkbox-container {
width: 50%; /* 左側の幅 */
display: flex;
flex-direction: column;
padding-right: 10px; /* 右側との間に少し余白 */
overflow-y: auto; /* チェック{ックスが多い場合にスクロール */
}

#iframe-container {
width: 50%; /* 右側の幅 (100% - 30% - 余白分考慮) */
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box; /* paddingを含めて幅を計算 */
display: flex; /* 中のiframeを高さ100%にするため */
flex-direction: column; /* iframeを縦方向に伸ばす */
}

/* iframe自体のスタイル */
#iframe {
width: 100%;
height: 100%; /* 親要素(#iframe-container)の高さに合わせる */
border: none; /* iframeのデフォルト枠線を削除 */
}

/* チェック{ックスとラベルの間隔調整 */
#checkbox-container label {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkbox-container">
<h3>チェック{ックス</h3>
<label>
<input type="checkbox" name="option" value="チェック1" onclick="updateIframe()"> チェック1
</label>
<label>
<input type="checkbox" name="option" value="チェック2" onclick="updateIframe()"> チェック2
</label>
<label>
<input type="checkbox" name="option" value="チェック3" onclick="updateIframe()"> チェック3
</label>
<label>
<input type="checkbox" name="option" value="その他" onclick="updateIframe()"> その他
</label>
</div>

<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>"></iframe>
</div>
</div>

<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkboxes = document.querySelectorAll('input[name="option"]');
var selectedLabels = [];

checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
selectedLabels.push(checkbox.value);
}
});

var message = "";
if (selectedLabels.length > 0) {
// <BR>タグで改行するように変更
message = selectedLabels.join("<br><br>");
} else {
message = "項目が選択されていません";
}

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// メッセージが見やすいように body に直接ではなく、div などに入れるとより良いかもしれません
iframeDocument.body.innerHTML = "<div>" + message + "</div>";
}

// 初期表示(必要に応じてコメント解除)
// updateIframe();
</script>
</body>
</html>


使用変数

charset
checkbox) { if -------( Function )
checkboxes
content
id
iframe
iframeDocument
innerHTML
lang
message
name
onclick
scale
selectedLabels
srcdoc
type
updateIframe -------( Function )
value
width