jQuery实现获取选中复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery复选框练习</title>
<!-- 引入jQuery,引入你自己的jQuery文件 -->
<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>
<script type="text/javascript">
<!-- 选择全部/全不选 -->
$("#All").click(function(){
if("this.checked"){
$("#fruit :checkbox").prop("checked", true);
}else{
$("#fruit :checkbox").prop("checked", false);
}
});
<!--选择全部-->
$("#checkAll").click(function(){
$("#fruit :checkbox").prop("checked", true);
});
<!--全不选-->
$("#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>
最新文章
- mysql中间件atlas配置使用
- zookeeper集群
- Matlab中double,im2double,mat2gray区别
- Liferay7 BPM门户开发之43: Gradle依赖管理
- 18、SQL提高篇(变量的使用 拓展)
- iOS端给unity发送消息,实现两者交互。
- jquery easy ui 1.3.4 Tree树形菜单(9)
- hiho_1290_demo_day
- Hbase伪分布式
- C++学习笔记之数据类型
- Spring IoC — 基于XML的配置
- Linux 下编译Android-VLC开源播放器详解(附源码下载)
- 总结文件操作函数-文件夹(三)-C语言
- POJ1469_COURSES(二部图最大匹配)
- Java客户端调用.NET的WebService
- 测试修改gcs_server_processes参数
- 关于react的一些东西
- Raid卷详解
- 晨枫U盘启动盘制作工具V4.0-安装原版Win7
- 控制uniFrame显示的一个管理类