jquery实现全选，反选，取消

最新推荐文章于 2022-08-29 21:32:04 发布

原创最新推荐文章于 2022-08-29 21:32:04 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

方法总结专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的兴趣爱好复选框操作案例，包括全选、反选和取消功能，并提供了完整的HTML和JavaScript代码。通过简单的按钮点击即可控制多个复选框的状态。

使用的时候记得把jquery的包导进去<script src="jquery-1.11.0.js"></script>

后台接收使用数组接收选中的值：String[] str = request.getParameterValues("interest");

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="jquery-1.11.0.js"></script>

<script>

$(document).ready(function(){

//全选

$("#selectAll").click(function(){

$("input[name='interest']").prop("checked",true);

});

//取消

$("#cancell").click(function(){

$("input[name='interest']").prop("checked",false);

});

//反选

$("#revers").click(function(){

$("input[name='interest']").each(function(){

var flag=$(this).prop("checked");

$(this).prop("checked",!flag);

})

})

});

</script>

</head>

<body>

<p>兴趣爱好</p>

<form action="">

<input type="checkbox" name="interest" value="踢足球"/>踢足球<br/>

<input type="checkbox" name="interest" value="打篮球"/>打篮球<br/>

<input type="checkbox" name="interest" value="唱歌"/>唱歌<br/>

<input type="checkbox" name="interest" value="钢管舞"/>钢管舞<br/>

<input type="checkbox" name="interest" value="睡觉"/>睡觉<br/>

<input type="checkbox" name="interest" value="看电影"/>看电影<br/>

<input type="button" value="全选" id="selectAll"/>

<input type="button" value="反选" id="revers"/>

<input type="button" value="取消" id="cancell"/>

</form>

</body>

</html