jQuery技术制作体育选课表单,其中包括姓名学号电话,且有重置和提交功能,选课少于两门无法提交
时间: 2024-03-23 12:41:41 浏览: 12
好的,您的问题是如何使用jQuery技术制作体育选课表单,包括姓名、学号、电话,以及重置和提交功能,并且如果选课少于两门则无法提交,是吗?
以下是一个简单的示例代码,可以实现上述功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>体育选课表单</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 禁止提交按钮
$('#submit_btn').attr('disabled', true);
// 重置表单
$('#reset_btn').click(function(){
$('#name').val('');
$('#student_id').val('');
$('#phone').val('');
$('input[type="checkbox"]').prop('checked', false);
$('#submit_btn').attr('disabled', true);
});
// 监听复选框变化
$('input[type="checkbox"]').change(function(){
if ($('input[type="checkbox"]:checked').length >= 2) {
$('#submit_btn').attr('disabled', false);
} else {
$('#submit_btn').attr('disabled', true);
}
});
// 提交表单
$('#submit_btn').click(function(){
// TODO: 处理表单数据
alert('提交成功!');
});
});
</script>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="student_id">学号:</label>
<input type="text" id="student_id" name="student_id"><br>
<label for="phone">电话:</label>
<input type="text" id="phone" name="phone"><br>
<label for="course1">课程1:</label>
<input type="checkbox" id="course1" name="course1" value="1"><br>
<label for="course2">课程2:</label>
<input type="checkbox" id="course2" name="course2" value="2"><br>
<label for="course3">课程3:</label>
<input type="checkbox" id="course3" name="course3" value="3"><br>
<button type="button" id="reset_btn">重置</button>
<button type="button" id="submit_btn">提交</button>
</form>
</body>
</html>
```
代码解释:
1. 引入jQuery库。
2. 在页面加载完成后,禁止提交按钮。
3. 当点击“重置”按钮时,清空表单并禁止提交按钮。
4. 当复选框变化时,如果选中的课程数目大于等于2,则启用提交按钮;否则禁止提交按钮。
5. 当点击“提交”按钮时,处理表单数据。
希望这个示例代码对您有帮助!如果您有任何问题或疑问,请随时提出。