jquery实现全选，反选，取消

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

leigelg

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

阅读量2k

点赞数

分类专栏：方法总结文章标签： jquery

本文链接：https://blog.csdn.net/leigelg/article/details/64439798

版权

方法总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

使用的时候记得把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