<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
你爱好的运动是?<input type="checkbox" id="checkAllBox" />全选/全不选
<br/>
<input type="checkbox" name="items" id="" value="足球" />足球
<input type="checkbox" name="items" id="" value="" />篮球
<input type="checkbox" name="items" id="" value="" />羽毛球
<input type="checkbox" name="items" id="" value="" />乒乓球
<br>
<button type="button" id ="checkAllBtn">全选</button>
<button type="button" id = "checkNoBtn">全不选</button>
<button type="button" id ="checkRevBtn">反 选</button>
<button type="button" id ="sendBtn">提交</button>
<!-- <input type="submit" value=""/> -->
</form>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 获取全选/全不选复选框
var $checkAllBox = $('#checkAllBox');
// var $checkNoBox = $('#checkNoBox');
// 获取所有爱好按钮
var $items = $(':checkbox[name = items]');
// var $items = $('#items')
// 事件:点击全选按钮,各种球类复选框,点击就选中
$('#checkAllBtn').click(function(){
// $items.checked = 'checked';
$items.prop('checked',true);
$checkAllBox.prop('checked',true);
});
// 全不选事件
$('#checkNoBtn').click(function(){
$items.prop('checked',false);
$checkAllBox.prop('checked',false);
});
// 事件 反选按钮
$('#checkRevBtn').click(function(){
$items.each(function(){
this.checked = !this.checked;
})
// 定义一个变量用来记录选中数量,如果全部选中,则复选框勾选;反之,取消复选框勾选
var checkedLength = $items.filter(':checked').length;//filter 根据选择器,获取已有的jQuery对象
console.log(checkedLength);
/* if(checkedLength == $items.length){
// $checkAllBox.checked = !$checkAllBox.checked;
$checkAllBox.prop('checked',true);
}else if(checkedLength == 0){
$checkAllBox.prop('checked',false);
} */
$checkAllBox.prop('checked',$items.filter(':checked').length == $items.length);
$checkAllBox.prop('checked',$items.filter(':not(:checked)').length == 0);
})
// 全选/全不选选框事件
// 遍历选中的爱好,如果选中的爱好数量等于爱好总数量,则复选框勾选;如果选中的爱好数量为0,则不勾选复选框
$items.click(function(){
$checkAllBox.prop('checked',$items.filter(':checked').length == $items.length);
$checkAllBox.prop('checked',$items.filter(':not(:checked)').length == 0);
})
// 提交事件 点击sentBtn按钮,根据过滤选择器,选出选中的按钮,然后遍历它们,最后输出这些值
$('#sendBtn').click(function(){
$items.filter(':checked').each(function(){
alert(this.value);
})
})
});
</script>
</body>
</html>
使用jQuery完成表单验证,实现全选、全不选、反选以及提交事件
最新推荐文章于 2022-07-30 17:29:30 发布