<%@ 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. UINavigationBar统一修改导航条样式

    #pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...

  2. SEO-站外优化规范

    站外优化规范 新站 前期(提高网站曝光率<信息发布平台>) 一． 分类目录信息发布 二． 黄页网信息发布 三． 友链平台信息发布 四． 各大论坛引蜘蛛区信息发布 五． 网址提交 六． 社区 ...

  3. i++和++i 的学习

    在<<C++ Primer>> 第四版 5.5中讲解到: ++i:返回操作之后的结果,且是个左值. i++:返回操作之前的结果,且是有右值. // 2_3.cpp : 定义控制 ...

  4. Android手机USB调试安全闲扯(315晚会免费充电桩事件)

    前言       今年的又准时乖巧的观看了315晚会,与大家一同学习了各种发财致富的方式...咳.咳..学习防范违法行骗的各种手段.比较感兴趣的两个,一人脸识别,二公共充电桩安全隐患.第一个今天不扯, ...

  5. java线程的等待、通知机制【读书笔记】

    代码示例: package com.baidu.nuomi.concurrent; import java.text.SimpleDateFormat; import java.util.Date; ...

  6. Cordova框架基本原理

    最近在做混编项目,也是从项目里开始接触Cordova框架,网上很多帖子都总结的很好,我还是要总结一下,便于加深一下. Cordova框架是一个可以让JS与原生代码(包括 Android 的 java, ...

  7. IE浏览器img不显示解决

    下面的只是一个我们在网页中插入一个图片的简单例子,浏览的时候我们也没有任何问题 <!doctype html> <html> <head> <meta cha ...

  8. 我的第一本docker书-阅读笔记

    花了三四天看完了我的第一本docker书,话说书写的还是挺简单易懂的.与传统的VM,VirtualBox,或者与那种内核虚拟的xen,kvm相比,docker作为一种容器的虚拟方式,以启动进程的方式来 ...

  9. 应不应该使用inline-block代替float

    CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结.特别是处理内 ...

  10. Java并发编程：如何创建进程？

    转载自:http://www.cnblogs.com/dolphin0520/p/3913517.html 在前面一篇文章中已经讲述了在进程和线程的由来,今天就来讲一下在Java中如何创建线程,让线程 ...