<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script>
/* 第一种方法
function selectAll() {

if ($("#select-all").is(":checked")) {

$("[name='selected']").prop("checked", true);
} else {

$("[name='selected']").prop("checked", false);
}

} */

/*
*
第二种方法
*/
function selectAll() {

if ($("#select-all").is(":checked")) {//判断一个checkbox多选框是否选中

$("input:checkbox[name='selected']").prop("checked", "checked");

var allValue = queryCheckedValue();
alert(allValue);

} else {

$("input:checkbox[name='selected']").prop("checked", "");
var str = noCheckedValue();
alert(str);

}

}

//获取所有选中checkbox的值

function queryCheckedValue() {

var str = "";

$("input:checkbox[name='selected']:checked").each(function(i) {

var val = $(this).val();
str = str + val + "-";

});

return str;

}

//所有的name为‘selected’的checkbox的值
function noCheckedValue() {

var str = "";
$("input:checkbox[name='selected']").each(function(i) {

var val = $(this).val();
str = str + "-" + val;
});
return str;
}

//判断所有的子checkbox全部选中时，总checkbox选中，否则，反之；
function oneToAll() {

var allChecked = 0;//所有选中checkbox的数量

var all = 0;//所有checkbox的数量

$("input:checkbox[name='selected']").each(function(i) {
all++;
if ($(this).is(":checked")) {
allChecked++;
}

});

if(allChecked==all){//相等时，则所有的checkbox都选中了，否则，反之；

$("#select-all").prop("checked",true);

}else{

$("#select-all").prop("checked",false);

}

}
</script>
</head>
<body>

<table>

<tr>
<td><input type="checkbox" id="select-all"
onclick="selectAll();" /></td>
<td>全选的checkbox</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="1" onclick="oneToAll();"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="2" onclick="oneToAll();"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="3" onclick="oneToAll();"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="4" onclick="oneToAll();"/></td>
<td>4</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="5" onclick="oneToAll();"/></td>
<td>5</td>
</tr>
</table>

</body>
</html>

checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中的更多相关文章

  1. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  3. 2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

    字符串的另一种写法:<<<AAAA; 后两个AA回车要求顶格  不然报错 例子: <!DOCTYPE html> <html lang="en" ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  6. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  7. Jquery 利用单个复选款（checkbox）实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  8. 【jQuery】CheckBox使用attr全选无法正确显示

    今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...

  9. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

随机推荐

  1. Node.js web快速入门 -- KoaHub.js

    介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async & ...

  2. swift -- 单例

    方式一: (类似OC) class SingletonDispatch{ class var shareInstance : SingletonDispatch { //结构体 struct Stat ...

  3. 分享自己使用CSS的public

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,td,figure{marg ...

  4. paoding-rose 了解

    paoding-rose 是人人开源的基于 spring 开发的 javaEE 框架.wiki 地址: https://code.google.com/archive/p/paoding-rose/ ...

  5. idea调试SpringMvc, 出现：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener错误的解决办法

    有时,使用idea开发SpringMvc发现调试时出现以下错误: 12-Mar-2017 12:08:02.345 严重 [RMI TCP Connection(2)-127.0.0.1] org.a ...

  6. supermap开发webgis的经验

    SuperMap 开发WebGIS的经验总结 - 综合课件 - 道客巴巴 http://www.doc88.com/p-743552004620.html

  7. linux CentOS6.5 安装SVN & 可视化管理工具iF.SVNAdmin

    转:http://tanghenxin.lofter.com/post/1cc667b3_5ac50dc 实际系统环境: CentOS 6.5 x64 一.安装Apache 通常系统都已经装好了,但我 ...

  8. 手动的写一个structs

    为了更好的学习框架的运行机制,这里开始学习框架之前,介绍一个简单的自定义的框架. 需求: 登录:id:aaa,pwd:888登录成功之后,跳转到,index.jsp页面并显示,欢迎你,aaa 注册,页 ...

  9. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  10. Fireworks快捷键大全和ps查看切图的坐标颜色

    记住后方便了许多