<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>以这段代码为基础,实现选中第一个框之后点击确定控制台打印数字一,选中第二个框,点击确定,控制台打印数字二,若都选中点击确定打印数字12,若都没选中,则打印3
时间: 2023-07-06 16:28:03 浏览: 167
可以在确定按钮的点击事件中添加逻辑,判断两个复选框的选中情况,并根据情况打印不同的数字。代码如下:
```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="1" 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="2" onclick="handleCheckboxClick(this)">
<label class="form-check-label" for="check2">二班</label>
</div>
<button type="button" class="btn btn-primary mt-3" onclick="handleButtonClick()">确定</button>
</form>
</div>
<script>
let check1 = document.getElementById("check1");
let check2 = document.getElementById("check2");
function handleCheckboxClick(checkbox) {
// 在这里添加复选框被选中后的处理逻辑
}
function handleButtonClick() {
if (check1.checked && check2.checked) {
console.log("12");
} else if (check1.checked) {
console.log("1");
} else if (check2.checked) {
console.log("2");
} else {
console.log("3");
}
}
</script>
```
需要注意的是,复选框的 value 属性需要设置为数字,方便后续判断。同时,确定按钮的类型需要设置为 button,以避免提交表单导致页面刷新。
阅读全文