本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个导出选项的选择器功能，包括全选和反选按钮，用于从多个选项中进行快速选择。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function invertSelectType() {
//这里重写反选和全选方法，因为再次使用原先的会导致页面上的选项也会被选
var ids = $("input[name='stu']");
for (var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
ids[i].checked = "";
} else {
ids[i].checked = "checked";
}
}
}
//全选
function allSelectType() {
var ids = $("input[name='stu']");
for (var i = 0; i < ids.length; i++) {
ids[i].checked = "checked";
}
}
</script>
</head>
<body>
<p style="text-align:center; padding-top:15px">
选择班级：
<select name="claId" id="claId" style="color:#999999">
<option value="0" style="color:#999999">==选择==</option>
<option value=1 style="color:#000000">药学1班</option>
<option value=2 style="color:#000000">药学2班</option>
</select>
</p>
<p></p>
<p style="text-align:center; padding-top:15px"> 选择需要导出的选项：</br>
<input type="checkbox" name="stu" id="a" value="考生学号">考生学号
<input type="checkbox" name="stu" id="a" value="考生姓名">考生姓名</br>
<input type="checkbox" name="stu" id="a" value="考生班级">考生班级
<input type="checkbox" name="stu" id="a" value="考生性别">考生性别</br>
<input type="checkbox" name="stu" id="a" value="考试得分">考试得分
<input type="checkbox" name="stu" id="a" value="测试时间">测试时间</br>
<input type="checkbox" name="stu" id="a" value="交卷时间">交卷时间
<input type="checkbox" name="stu" id="a" value="考试用时">考试用时</br>
</p>
<p style="text-align:center; padding-top:15px">
<input type="button" value="全选" onclick="allSelectType();"/>
<input type="button" value="反选" onclick="invertSelectType();"/>
</p>
</body>
</html>
JQuery实现全选和反选
最新推荐文章于 2024-01-23 19:19:19 发布
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
