<!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>

jQuery实现获取选中复选框的值的更多相关文章

  1. jQuery - 选中复选框则弹出提示框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jquery：获取checked复选框的问题

    jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...

  3. 自动化测试selenium(四)check，选中复选框，操作一组元素

    定位复选框位置 打开浏览器,按F12,审查元素 接下来,我们要实现选中复选框 List<WebElement> inputs = driver.findElements(By.tagNam ...

  4. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  5. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  6. Jquery怎么获取select选中项 自定义属性的值

    Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...

  7. 获取jsp选中复选框的id传到后台controller，进行逻辑删除等操作

    逻辑删除设备:(数据表中还有这条记录,不显示出来) 思路: 数据表加个字段display,值为Y/N,只显示display为Y的,删除时,把display的值改为N,就不会显示出来 jsp页面如下图, ...

  8. JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

  9. JQuery实现获取多个input输入框的值，并存放在一个数组中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. day 9~11 函数

    今日内容 '''函数四个组成部分函数名:保存的是函数的地址,是调用函数的依据函数体:就是执行特定功能的代码块函数返回值:代码块执行的结果反馈函数参数:完成功能需要的条件信息​1.函数的概念2.函数的定 ...

  2. [LeetCode] 5. 最长回文子串

    题目链接:https://leetcode-cn.com/problems/longest-palindromic-substring/ 题目描述: 给定一个字符串 s,找到 s 中最长的回文子串.你 ...

  3. LCA-RMQ+欧拉序

    还是那一道洛谷的板子题来说吧 传送门 其实好几天之前就写了 结果dr实在是太弱了 没有那么多的精力 于是就一直咕咕咕了 哎 今天终于补上来了 LCA概念传送门 RMQ传送门 这个算法是基于RMQ和欧拉 ...

  4. c++面经积累<2>

    4.类成员初始化方式:列表初始化和赋值初始化 赋值初始化通过在函数体内进行赋值,列表初始化,在构造函数后面加上冒号,使用初始化列表进行初始化.在函数体内进行初始化,是在所有的数据成员被分配内存空间后进 ...

  5. Golang 入门系列(十) mysql数据库的使用

    之前,已经讲过一些Golang的基础的东西,感兴趣的可以看看以前的文章,https://www.cnblogs.com/zhangweizhong/category/1275863.html, 今天简 ...

  6. SpringCloud（2）服务消费者（rest+ribbon）

    1.准备工作 这一篇文章基于上一篇文章的工程.启动eureka-server 工程,端口为 8761.分别以端口 8762 和 8763 启动 service-hi 工程.访问 localhost:8 ...

  7. You earned your Program Management Professional (PgMP)® Credential

    You earned your Program Management Professional (PgMP)® Credential. pasting

  8. 软件工程(GZSD2015) 第二次作业小结

    第二次作业,从4月7号开始,陆续开始提交作业.根据同学们提交的作业报告,相比第一次作业,已经有了巨大改变,大家开始有了完整的实践,对那些抽象的名词也开始有了直观的感受,这很好.然后有一些普遍存在的问题 ...

  9. svnsync同步svn

    使用svnsync实现已有版本库的镜像svn不支持分布式开发,所以把svn版本库保存在一台服务器上是不安全的.制作一个镜像svn版本库有多种方式,我采用subversion自带的svnsync程序. ...

  10. EQueue

    EQueue 2.3.2版本发布(支持高可用) - dotNET跨平台 - CSDN博客https://blog.csdn.net/sD7O95O/article/details/78097193 E ...