59 lines
2.1 KiB
HTML
59 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Checkbox Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>Checkbox Test</h1>
|
|
<form id="testForm">
|
|
<div>
|
|
<input type="checkbox" id="checkbox1" name="checkbox1" onchange="showValues()">
|
|
<label for="checkbox1">Checkbox 1</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="checkbox2" name="checkbox2" onchange="showValues()">
|
|
<label for="checkbox2">Checkbox 2</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio1" name="radioGroup" value="option1" onchange="showValues()">
|
|
<label for="radio1">Radio 1</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio2" name="radioGroup" value="option2" onchange="showValues()">
|
|
<label for="radio2">Radio 2</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="textInput" name="textInput" placeholder="Text input" oninput="showValues()">
|
|
</div>
|
|
<div id="result">
|
|
<p>Checkbox 1: false</p>
|
|
<p>Checkbox 2: false</p>
|
|
<p>Radio 1: false</p>
|
|
<p>Radio 2: false</p>
|
|
<p>Text Input: </p>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
function showValues() {
|
|
const checkbox1 = document.getElementById('checkbox1').checked;
|
|
const checkbox2 = document.getElementById('checkbox2').checked;
|
|
const radio1 = document.getElementById('radio1').checked;
|
|
const radio2 = document.getElementById('radio2').checked;
|
|
const textInput = document.getElementById('textInput').value;
|
|
|
|
const result = document.getElementById('result');
|
|
result.innerHTML = `
|
|
<p>Checkbox 1: ${checkbox1}</p>
|
|
<p>Checkbox 2: ${checkbox2}</p>
|
|
<p>Radio 1: ${radio1}</p>
|
|
<p>Radio 2: ${radio2}</p>
|
|
<p>Text Input: ${textInput}</p>
|
|
`;
|
|
|
|
console.log('Values updated:', { checkbox1, checkbox2, radio1, radio2, textInput });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|