jQuery实现获取选中复选框的值

最新推荐文章于 2021-02-01 06:51:59 发布

weixin_30437337

最新推荐文章于 2021-02-01 06:51:59 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Fancy1486450630/p/10136308.html

本文介绍了一个使用JQuery进行复选框操作的示例，包括全选、全不选、反选功能及获取选中项的值。通过简单的HTML结构和JQuery事件绑定，实现了对复选框组的有效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery复选框练习</title>

<script type="text/javascript" src="jquery.min.js" ></script>
</head>
<body>
<div>
<p>选择要购买的水果</p>
<ul id="fruit">
<li><input type="checkbox" name='message' value="001"/>苹果</li>
<li><input type="checkbox" name='message' value="002"/>雪梨</li>
<li><input type="checkbox" name='message' value="003"/>芒果</li>
<li><input type="checkbox" name='message' value="004"/>菠萝</li>
</ul>
<input type="checkbox" id="All"/>
<button id="checkAll">全选</button>
<button id="nothing">全不选</button>
<button id="reverseAll">反选</button>
<button class="chooseFruit">购买</button>

$("#nothing").click(function(){
$("#fruit :checkbox").prop("checked", false);
});


$("#reverseAll").click(function(){
$("#fruit :checkbox").each(function(i){
$(this).prop("checked", !$(this).prop("checked"));
});
});


$(".chooseFruit").click(function(){
var arr = new Array();
$("#fruit input:checkbox[name='message']:checked").each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
console.log(vals,222);
});
</script>
</div>
</body>
</html>