<div class="container mt-3"align="center"> <h2>选择可进入的班级</h2> <form action="/action_page.php"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked> <label class="form-check-label" for="check1">一班</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something"> <label class="form-check-label" for="check2">二班</label> </div> <button type="submit" class="btn btn-primary mt-3">确定</button> </form> </div>请帮我为以上代码添加点击事件
时间: 2023-07-03 16:32:10 浏览: 94
<div class="top">我的网页设计作业</div>
好的,您可以为复选框添加 `onclick` 事件,然后使用 JavaScript 来处理它。具体实现如下:
```html
<div class="container mt-3" align="center">
<h2>选择可进入的班级</h2>
<form>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked onclick="handleCheckboxClick(this)">
<label class="form-check-label" for="check1">一班</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something" onclick="handleCheckboxClick(this)">
<label class="form-check-label" for="check2">二班</label>
</div>
<button type="submit" class="btn btn-primary mt-3">确定</button>
</form>
</div>
<script>
function handleCheckboxClick(checkbox) {
if (checkbox.checked) {
console.log(checkbox.value + "被选中了");
// 在这里添加复选框被选中后的处理逻辑
} else {
console.log(checkbox.value + "被取消选中了");
// 在这里添加复选框被取消选中后的处理逻辑
}
}
</script>
```
在上面的代码中,我们为复选框添加了 `onclick` 事件,并将当前复选框作为参数传递给 `handleCheckboxClick` 函数。在函数中,我们使用 `if` 语句来判断复选框是否被选中,并在控制台中打印相应的信息。您可以在 `if` 和 `else` 语句中添加处理复选框被选中和被取消选中的逻辑代码。
阅读全文