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

时间：2022-09-22 13:53:38

<!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&lpar;四&rpar;check，选中复选框，操作一组元素

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

  4. js&amp&semi;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. Java对象大小计算

    这篇说说如何计算Java对象大小的方法.之前在聊聊高并发(四)Java对象的表示模型和运行时内存表示 这篇中已经说了Java对象的内存表示模型是Oop-Klass模型. 普通对象的结构如下,按64位机 ...

  2. iOS开发使用半透明模糊效果方法整理

    虽然iOS很早就支持使用模糊效果对图片等进行处理,但尤其在iOS7以后,半透明模糊效果得到大范围广泛使用.包括今年最新发布的iOS8也沿袭了这一设计,甚至在OS X 10.10版Yosemite中也开 ...

  3. github生成静态博客

    github生成静态博客很简单. 1.确认你知道你github的用户名,我的叫做chenxing12 2.创建一个项目名字叫做:用户名.github.io 我的用户名叫做chenxing12,所以我创 ...

  4. lua 面向对象编程类机制实现

    lua no class It is a prototype based language. 在此语言中没有class关键字来创建类. 现代ES6, 已经添加class类. prototype bas ...

  5. &lpar;转&rpar;linux下mysql的安装过程

    最近在linux安装了mysql,根据网上收集的资料和个人的操作过程,大概做了个整理,以便以后进行参考回顾. 1.下载mysql-5.1.36.tar.gz,并且解压. tar -xzvf mysql ...

  6. DbUtility-查询DataTable

    直接上源码 using System; using System.Data; using System.Threading.Tasks; using DbUtility; namespace Test ...

  7. 通过Jetty搭建一个简单的Servlet运行环境

    最近在做一些简单的Servlet开发的时候,感觉每次调试的时候都要发布到tomcat上很麻烦,把程序共享给同事也很麻烦,需要帮他设置本地的tomcat环境. 在网上找了找其他的Servlet运行环境, ...

  8. js字符串String提取方法比较

    JavaScript: Slice, Substring, or Substr的选择! 在JavaScript中,字符串主要通过以下String方法之一提取: // slice // syntax: ...

  9. 微信小程序wx&period;request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  10. BZOJ2808 &colon; 那些年我们画格子

    若$\min(n,m)=1$,那么设$f[i][j][k]$表示考虑前$i$个格子,改变了$j$次颜色,$i$的颜色为$k$的方案数,直接转移即可. 否则$\min(n,m)\geq 2$,那么有解当 ...

相关文章