level 1
keigosh
楼主
像这样一个页面上存在多个表单的情况。要求是用一段通用代码实现各个表单独立的全选/反选功能。我写的单个代码如下
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入jQuery -->
<script src='jquery-1.11.3/jquery-1.11.3.js' ></script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<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/>
</form>
<br/><br/><br/><br/><br/>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="CheckedAll2" />全选/全不选<br/>
<input type="checkbox" name="items2" value="足球"/>足球
<input type="checkbox" name="items2" value="篮球"/>篮球
<input type="checkbox" name="items2" value="羽毛球"/>羽毛球
<input type="checkbox" name="items2" value="乒乓球"/>乒乓球<br/>
</form>
<script type="text/javascript">
$(function(){
//第一个表单
$("#CheckedAll").click(function(){
$("[name=items]:checkbox").prop("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var $tmp = $("[name=items]:checkbox")
var flag = $tmp.length == $tmp.filter(":checked").length;
$("#CheckedAll").prop("checked",flag);
});
//第二个表单
$("#CheckedAll2").click(function(){
$("[name=items2]:checkbox").prop("checked",this.checked);
});
$("[name=items2]:checkbox").click(function(){
var $tmp = $("[name=items2]:checkbox")
var flag = $tmp.length == $tmp.filter(":checked").length;
$("#CheckedAll2").prop("checked",flag);
});
});
</script>
</body>
</html>
这样基本上就等于每多一个表单都要换全选按钮的类名和多选按钮的name值。
求大神赐教，由于数据录入，到时候页面上肯定会存在多个这样的表单，
所以不能像这样一直添加和变更js代码。需要一个通用性的代码。