获取一组CheckBox:

jQuery:

$(function () {
  $("input[name=names]").click(function () { //获得所有的name=names的input,并给他们添加click监听事件
    var arr = new Array();
    $("input[name=names]:checked").each(function (key, value) {
      arr[key] = $(value).val();
    });
    $("#getnames").text("选中" + arr.length + "项:" + arr.join(","));//更新到p层上
  });
}); //join()方法用于把数组中的所有元素放入一个字符串,元素是通过指定分隔符进行分隔的。
//如:.join("/")就是使用“/”来分隔获取的到每一组元素,如果括号里不写参数,就默认逗号
//each()方法规定为每个匹配元素规定运行的函数,此处用来遍历这些CheckBox选中的,,each
//中有两个参数,第一个是选择器的位置,也就是索引,如果有三个选中,会逐个遍历循环,第一次
//的时候,key为0,第二次key为1,依次递加,而第二个参数就是当前元素自己,和this一样,
//比如要获取这个元素的值就可以直接$(value).val();也可以$(this).val(),如果用不到第一个
//参数的时候,可以两个参数都不写,获取元素值直接
$(this).val()就行


HTML:

<input type="checkbox" name="names" value="jim" />jim
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="lily" />lily
<p id="getnames"></p>

运行效果:

=======================================我是分割线====================================================

CheckBox全选:

js:

<script>
function checkAll() {
var all=document.getElementById('all');//获取到点击全选的那个复选框的id
var one=document.getElementsByName('checkname[]');//获取到复选框的名称
if(all.checked==true){//因为获得的是数组,所以要循环 为每一个checked赋值
for(var i=0;i<one.length;i++){
one[i].checked=true;
} }else{
for(var j=0;j<one.length;j++){
one[j].checked=false;
}
}
}
</script> //或者不用if,else判断全选键是否选中,直接获取完all和one之后,循环里面写one[i].checked=all.checked,直接赋值

HTML:

<thead>
<tr>
<td><input type="checkbox" name="all" id="all" onclick="checkAll()" /></td>
</tr>
</thead>
<tbody>
<td><input type="checkbox" name="checkname[]"value="1"/></td> <td><input type="checkbox" name="checkname[]" value="2"/></td> <td><input type="checkbox" name="checkname[]" value="3"/></td> <td><input type="checkbox" name="checkname[]" value="4"/></td> <td><input type="checkbox" name="checkname[]" value="5"/></td>
</tbody>

jQuery实现全选:

<script type="text/javascript">
//checkbox 全选/取消全选
var isCheckAll = false;
function swapCheck() {
if (isCheckAll) {
$("input[type='checkbox']").each(function() {
this.checked = false;
});
isCheckAll = false;
} else {
$("input[type='checkbox']").each(function() {
this.checked = true;
});
isCheckAll = true;
}
}
</script>

HTML

<table border="1">
<tr>
<th><input type="checkbox" onclick="swapCheck()" /></th>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>February</td>
<td>$150</td>
</tr>
</table>

CheckBox获取一组及全选的更多相关文章

  1. Android开发CheckBox控件,全选,反选,取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

  2. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  4. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  5. 转发!HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  6. checkbox实现单选,全选,反选,取消选

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  7. 永久的CheckBox(单选,全选/反选)!

    <html> <head> <title>选择</title> <script type="text/javascript" ...

  8. 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo

    提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...

  9. jquery实现checkbox的单选和全选

    一.思路 全选:判断“全选”checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之 单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox状态设置为false ...

随机推荐

  1. pycharm 的调试模式 MAC版

    进入调试模式 运行和调试快捷键 control +R 运行程序 control +alt +R 快速选择运行/调试配置并运行或编辑它 command +R 重新运行 control +R 重复执行相同 ...

  2. ELF文件加载与动态链接(一)

    关于ELF文件的详细介绍,推荐阅读: ELF文件格式分析 —— 滕启明.ELF文件由ELF头部.程序头部表.节区头部表以及节区4部分组成. 通过objdump工具和readelf工具,可以观察ELF文 ...

  3. day02python入门

    今日概要 解释器环境安装 输出 python试执行 数据类型 变量 输入 注释 条件判断 循环 占位符 数据类型转换 1. 环境的安装 python解释器 py2: Python2.7 (老版本) . ...

  4. js中的Call()和apply()

    Call和apply,就是改变函数里面的this指向的方法. xxx.call()或xxx.apply() 特别强调下xxx必须是function,(普通函数,类,构造函数) var obj={ na ...

  5. Arch Linux 的休眠设置

    https://wiki.archlinux.org/index.php/Power_management/Suspend_and_hibernate_(简体中文)https://wiki.archl ...

  6. 学习笔记GAN002:DCGAN

    Ian J. Goodfellow 论文:https://arxiv.org/abs/1406.2661 两个网络:G(Generator),生成网络,接收随机噪声Z,通过噪声生成样本,G(z).D( ...

  7. jsp后台取出request请求头

    请求发到a2这个servlet 在这个servlet中请求转发到index.jsp 在jsp中如下的java代码 Enumeration headernames=request.getHeaderNa ...

  8. Transaction rolled back because it has been marked as rollback-only 原因 和解决方案

    产生原因  , 1 serviceA 调用 serviceB 然后 B  抛出异常 ,B 所在的 事物 回滚,B 把当前可写 事物标记成 只读事物 , 2 如果 A 和B 是在 同一个事物环境,并且 ...

  9. NPOI导出excel(2.0.6版本)

    public static void WriteExcel(System.Data.DataTable dt,string fileName) { NPOI.XSSF.UserModel.XSSFWo ...

  10. bananapi+OLED做的一个打地鼠游戏,c语言编程

    说明一下:BPI是对拍死的BPI的计数,对应最终的成绩RANK是难度 数值越低难度越高 每当打死10个BPI以后就会减一即难度高一级 默认初始化RANK等于15 DIE是存在的BPI数量,一旦数量大于 ...