本文介绍了如何利用jQuery库轻松实现页面中复选框的全选与反选功能，通过简单的JavaScript代码，可以方便地控制多个复选框的状态，为网页交互提供了便捷的解决方案。
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("#qx").click(function(){ $(":checkbox").attr("checked",true);});
$("#qbx").click(function(){ $(":checkbox").attr("checked",false);});
$("#fx").click(function(){$(":checkbox").each(function(){$(this).attr("checked",!$(this).attr("checked"))})});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球<br>
<input type="button" id="qx" value="全选">
<input type="button" id="qbx" value="全不选">
<input type="button" id="fx" value="反选">
</form>
</body>
</html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("#qx").click(function(){ $(":checkbox").attr("checked",true);});
$("#qbx").click(function(){ $(":checkbox").attr("checked",false);});
$("#fx").click(function(){$(":checkbox").each(function(){$(this).attr("checked",!$(this).attr("checked"))})});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球
<input type="checkbox" name="items">篮球<br>
<input type="button" id="qx" value="全选">
<input type="button" id="qbx" value="全不选">
<input type="button" id="fx" value="反选">
</form>
</body>
</html>
扫一扫
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
