<!DOCTYPE html>
<html lang="en">
<!--实现全选、全不选、提交。遗留反选功能未实现,dai
主要学习$(选择器)的用法
-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery.js"></script><!--引入jquery文件-->
<script>
$(function (){
$("#All").click(function (){
$(":checkbox").prop("checked",true);
})
$("#None").click(function (){
$(":checkbox").prop("checked",false);
})
$("#AllorNone").click(function (){
//同类型的一次多选
$(":checkbox[name='items']").prop("checked",this.checked);
})
$("#Send").click(function ( ) {
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
})
})
})
</script>
</head>
<body>
<form method="post" action="">
<p>你的爱好是</p>
<input type="checkbox" id="AllorNone" /> 全选/全不选
<br />
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br />
<input type="button" id="All" value="全选" />
<input type="button" id="None" value="全不选" />
<input type="button" id="Send" value="提交" />
</form>
</body>
</html>
前端:表格全选、全不选、提交
最新推荐文章于 2023-05-17 15:38:46 发布