关于checkbox的一些问题(全选,反选,以及取值)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../test.css">
	<style>
	*{
		margin: 0;
		padding: 0
	}
	tr ,td{
		border:1px solid #332D2D;
	}
	td{
		width: 50px;
	}
	.btn-group,#table{
		margin-top:25px;
		margin-left:25px;
	}
	button{
		width: 100px;
		height: 25px;
		border-radius: 25px;
		box-shadow: 2px 2px 1px #3F3A3A;
	}
</style>
</head>
<body>
<div class="btn-group">
<button id="add" onclick="addRow()">添加行</button>
<button id="checkall" onclick="checkall()">全选</button>
<button id="checkinvert" onclick="inverse()">反选</button>
<button id="uncheckall" onclick="uncheckall()">全不选</button>
<button id="del" onclick="delcheck()">删除选中的</button>
<button id="sub" onclick="sub()">提交</button>
</div>
<table id="table" style="width:480px;">
<thead>
	<th>one</th>
	<th>two</th>
	<th>three</th>
	<th>four</th>
</thead>
</table>
</body>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
var count=0;
	function addRow(){
		$("#table").append('<tr><td><input type="checkbox"  id="ch_'+count+ '" ></td>'
			+'<td > <input type="text"  id="na_'+count+ '" ></td>'
			+'<td ><input type="text"  id="age_'+count+ '" ></td>'
			+'<td > <input type="text"  id="ge_'+count+ '" ></td>'
			+'</tr>');
		count++;
	}
	function checkall(){
    var a=$("input[id^='ch_']:checkbox");
    for(var i=0;i<a.length;i++){	
    	a[i].checked=true;
    }
}
	function uncheckall(){
    var a=$("input[id^='ch_']:checkbox");
    for(var i=0;i<a.length;i++){
    	a[i].checked=false;
    }	
}
function delcheck(){
	var d=$("input[id^='ch_']");
	d.each(function(){
		if($(this).is(":checked")){
	$(this).parent().parent().remove();}	
	})
}
function sub(){
	var objs=[];
	$("input[id^=ch_]:checkbox").each(function(){
		if($(this).is(":checked")){
			var id=$(this).attr("id");
			var str=id.substring(3,4);
			var obj=new Object();
			obj.na=$("#na_"+str).val();
			obj.age=$('#ge_'+str).val();
			obj.ge=$('#age_'+str).val();
			objs.push(obj);
	}
	})
	}
function inverse(){
var a=$("input[id^=ch_]:checkbox");
a.each(function(){
if($(this).is(":checked")){
	$(this).prop("checked",false);
}
else{
	$(this).prop("checked",true);
}}
);
}
</script>
</html>
关于checkbox的一些问题(全选,反选,以及取值)的更多相关文章
- Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选/反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮
		效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ... 
- checkbox、全选反选,获取值
		<input id="Chk_All" onclick="CheckAll()" type="checkbox" /> < ... 
- 永久的CheckBox(单选,全选/反选)!
		<html> <head> <title>选择</title> <script type="text/javascript" ... 
- jQuery全选/反选checkbox
		<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
- jquery、js操作checkbox全选反选
		全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ... 
- jquery、js全选反选checkbox
		操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ... 
- 表单javascript checkbox全选 反选  全不选
		<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ... 
- Android开发CheckBox控件,全选,反选,取消全选
		在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ... 
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
		近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ... 
- jQuery实现checkbox(复选框)选中、全选反选代码
		谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ... 
随机推荐
- mvc+webapi 项目架构
			首先项目是mvc5+webapi2.0+orm-dapper+ef codefirst+redis+quartz.net+actionmq. 1.项目框架层次结构: 这个mvc项目根据不同的业务和功能 ... 
- NSString使用stringWithFormat拼接的相关知识
			NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ... 
- Yii2  用户登录
			在Yii2的basic版本中默认是从一个数组验证用户名和密码,如何改为从数据表中查询验证呢?且数据库的密码要为哈希加密密码验证? 下面我们就一步一步解析Yii2的登录过程. 一. 创建user表模型 ... 
- [Liferay6.2.2]AUI的小坑:input的type属性
			<aui:input name="name" label="姓名" value="<%=student.getName() %>&q ... 
- JavaScript 富文本编辑器
			WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ... 
- iOS导航控制器常用函数与navigationBar常用属性
			导航控制器常用函数触发时机 当视图控制器的View将要出现时触发 - (void)viewWillAppear:(BOOL)animated 当视图控制器的View已经出现时触发 - (void)vi ... 
- textbox 和lable换行保存和显示
			前台: <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"& ... 
- C#(委托a)
			C#(委托a) public delegate double TheOperator(double x, double y); public class Operators { static publ ... 
- CentOS系统配置记录
			1. 挂載 ntfs: 确定已经安装了rpmforge软件库的源.在线安装使用 yum install 命令 含有 rpmforge源. yum install fuse ntfs-3g -y 安装后 ... 
- 【BZOJ2157】旅游 LCT
			模板T,SB的DMoon..其实样例也是中国好样例...一开始不会复制,yangyang:找到“sample input”按住shift,按page down.... #include <ios ... 
