<html>

<head>

<title>jq全选以及获得选中项的值</title>

<meta charset="utf-8">

<script src="http://libs.baidu.com/jquery/1.4.1/jquery.js"></script>

<script>

$(function() {

    $("#select").click(function() {

        if ($(this).attr("checked")) {

            $("input[name=items]").each(function() {

                $(this).attr("checked", true);

            });

        } else {

            $("input[name=items]").each(function() {

                $(this).attr("checked", false);

            });

        }

    });

    //得到选中的值，ajax操作使用

    $("#submit").click(function() {

        var text="";

        $("input[name=items]").each(function() {

            if ($(this).attr("checked")) {

                text += ","+$(this).val();

            }

        });

         alert(text);

    });

});

</script>

</head>

<body>

<form action="#" method="post">

    <input type="checkbox" value="1" name="items"><br/>

    <input type="checkbox" value="2" name="items"><br/>

    <input type="checkbox" value="3" name="items"> <br/>

    <input type="checkbox" value="4" name="items"> <br/>

    <input type="checkbox" value="5" name="items"> <br/>

    <input type="checkbox" value="6" name="items"> <br/>

    <input type="checkbox" value="7" name="items"> <br/>

    <input type="checkbox" value="8" name="items"> <br/>

    <input type="checkbox" value="9" name="items"> <br/>

    <input type="checkbox" value="10" name="items"> <br/>

    <input type="checkbox" value="11" name="items"> <br/>

	<input type="checkbox" id="select"/> 全选<br/>

    <input type="submit" id="submit" value="提交">

</form>

</body>

</html>

　　好像高版本的jq库会有问题，待研究。。。。。

checkbox的全选，取消全选，获得选中值的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  3. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  4. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  5. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  6. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  7. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  8. Vue 全选/取消全选，反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  9. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  10. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. Spark-内存管理调优

    这篇文章主要是对官网内容学习过程的总结,大部分是原文,加上自己的学习笔记!!! spark 2.0+内存模型 调优内存使用时需要考虑三个因素: 对象使用的内存数量(您可能希望您的整个数据集都能装入内存 ...

  2. Struts2转换器

    为什么进行类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容都以文本编码方式传输到服务器端 服务器端的编程语言却有着丰富的数据类型 继承StrutsTypeConverter抽象类 继承 ...

  3. spark生态圈简介

    原文引自:http://www.cnblogs.com/shishanyuan/p/4700615.html 1.简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algori ...

  4. double转integer

    double id0 = row.getCell(0).getNumericCellValue(); Integer id = Integer.valueOf(Double.valueOf(id0). ...

  5. HBase的安装与配置

  6. Mahout In Action-第一章：初识Mahout

    1. 初识Mahout 本章涵盖以下内容: Apache Mahout是什么? 现实中推荐系统引擎.聚类.分类概述 配置mahout 读者可能从本书的标题中猜测到,本书是一本讲解如何将mahout应用 ...

  7. 2、设备树的规范（dts和dtb格式）

    第01节_DTS格式(1) 语法:Devicetree node格式:[label:] node-name[@unit-address] { [properties definitions]      ...

  8. UDP和TCP的区别？

    区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...

  9. 1.Spring【IOC】XML方式

    1.下载开发包 http://repo.springsource.org/libs-release-local/org/springframework/spring 2.创建WEB工程,引入jar包 ...

  10. BZOJ3907 网格 卡特兰数

    题目描述 某城市的街道呈网格状,左下角坐标为A(0, 0),右上角坐标为B(n, m),其中n >= m. 现在从A(0, 0)点出发,只能沿着街道向正右方或者正上方行走,且不能经过图示中直线左 ...