<%@ 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. 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装

    KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...

  2. NSPredicate 查询/搜索

    IOS NSPredicate 查询.搜索   简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 最常用到的函数 + (NSP ...

  3. 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  4. PowerDesigner建模应用（二）逆向工程，导出PDM文件前过滤元数据(表、视图、存储过程等)

    在上一篇文章<PowerDesigner建模应用(一)逆向工程,配置数据源并导出PDM文件>步骤二中导出了目标数据库对应的PDM文件, 该文件中展示出了所有表的信息与关系. 某些业务场景下 ...

  5. 利用python的爬虫技术爬取百度贴吧的帖子

    在爬取糗事百科的段子后,我又在知乎上找了一个爬取百度贴吧帖子的实例,为了巩固提升已掌握的爬虫知识,于是我打算自己也做一个. 实现目标:1,爬取楼主所发的帖子 2,显示所爬去的楼层以及帖子题目 3,将爬 ...

  6. 配置uwsgi

    首先要明确的是,如果你喜欢用命令行的方式(如shell)敲命令,那可以省去任何配置. 但是,绝大多数人,还是不愿意记那么长的命令,反复敲的.所以uwsgi里,就给大家提供了多种配置,省去你启动时候,需 ...

  7. pyqt4实现tab界面切换

    (转:https://segmentfault.com/q/1010000005143428)

  8. The superclass “javax.servlet.http.HttpServlet" was not found on the Java Build Path错误

    1.异常信息 创建maven web项目时,出现 The superclass "javax.servlet.http.HttpServlet" was not found on ...

  9. PRINCE2认证

    PRINCE是PRoject IN Controlled Environment(受控环境下的项目管理)的简称. PRINCE2描述了如何以一种逻辑性的.有组织的方法,按照明确的步骤对项目进行管理.它 ...

  10. piwik安装部署最佳实践

    1.piwik介绍 Piwik是一个PHP和MySQL的开放源代码的Web统计软件,它给你一些关于你的网站的实用统计报告,比如网页浏览人数,访问最多的页面,搜索引擎关键词等等. Piwik拥有众多不同 ...