54 lines
1.8 KiB
HTML
54 lines
1.8 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">
|
|
<label for="checkbox1">Checkbox 1</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="checkbox2" name="checkbox2">
|
|
<label for="checkbox2">Checkbox 2</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio1" name="radioGroup" value="option1">
|
|
<label for="radio1">Radio 1</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="radio2" name="radioGroup" value="option2">
|
|
<label for="radio2">Radio 2</label>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="textInput" name="textInput" placeholder="Text input">
|
|
</div>
|
|
<div>
|
|
<button type="button" id="showValues" onclick="showValues()">Show Values</button>
|
|
</div>
|
|
<div id="result"></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>
|
|
`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|