关于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 ...
随机推荐
- php解析.csv文件
public function actionImport() { //post请求过来的 $fileName = $_FILES['file']['name']; $fileTmpName = $_F ...
- 使用 CoordinatorLayout 实现复杂联动效果
GitHub 地址已更新: unixzii / android-FancyBehaviorDemo CoordinatorLayout 是 Google 在 Design Support 包中提供的一 ...
- NEFU 560 半数集
题目链接 递推就行,把a[0]设为1很巧妙. #include <cstdio> #include <iostream> using namespace std; ]={}; ...
- thinkphp 杂项(3.2.3)
G('start');//时间描点start php代码.... G('end');//时间描点end echo G('start','end',4).'-----------'; 时间统计echo ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- C# WebBrowser不能运行打开页面的activex
如果是在64位操作系统中编译的代码,如果activex是32位的那么将不会运行32位的activex. 解决方法:右击项目->属性->生成->目标平台[x86]
- 【转】c# Image获得图片路径的三种方法 winform
代码如下:c# pictureBox1.Image的获得图片路径的三种方法 winform 1.绝对路径:this.pictureBox2.Image=Image.FromFile("D:\ ...
- linux 自编软件运行时权限不足问题
在非根目录下" ./*.out " 文件时出现显示运行的权限不足的问题,经过调查,有人给出方案: 方案1: 在Linux下执行一个文件时候提示“权限不够”的解决办法如下 转到那个文 ...
- Daily Scrum Meeting ——EighthDay
一.Daily Scrum Meeting照片 橙汁参加ICPC未归,周一牛姐去上课,佳恺今天去迎新晚会表演舞台剧了 二.Burndown Chart 今日没有燃掉issues 增添了两个issue ...
- 1.0 Quartz 2D 简介
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” Quartz2D须知: (1)Quartz 2D是苹果官方的二维绘图引擎,同时支持 ...