实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

时间:2022-09-07 12:56:40

实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

上图是实现效果。

下面贴代码

表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果。

<th>
<input id="allboxs" onclick="allcheck()" type="checkbox"/>
</th>

td中的代码

<td>
<input name="boxs" type="checkbox"/>
</td>

js中实现全选、全不选效果

function allcheck() {
var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中,如果被选中则nn为true,反之为false
if(nn == true) {
var namebox = $("input[name^='boxs']"); //获取name值为boxs的所有input
for(i = 0; i < namebox.length; i++) {
namebox[i].checked=true; //js操作选中checkbox
}
}
if(nn == false) {
var namebox = $("input[name^='boxs']");
for(i = 0; i < namebox.length; i++) {
namebox[i].checked=false;
}
}
}

以上代码值得一提的是,获取checkbox的值或其他的什么,建议用name属性值操作,因为id属性在每一个页面中默认是唯一的,而name属性则可以取到属性值相同的所有。

实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中的更多相关文章

  1. ZH奶酪:纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  2. asp&period;net,根据gridview 中checkbox复选框选中的行对数据库进行操作

    在asp.net中,使用checkbox,对gridview添加复选框. 多选数据行后,根据已选数据,对原数据进行多条语句查询. string sql = "Select * from 表 ...

  3. table中列复选框全选,再选 效果

    <table class="table table-striped sortable table-bordered table-hover " id="zdnews ...

  4. jQuery&plus;SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  5. QTableView中嵌入复选框CheckBox 的四种方法总结

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  6. python QQTableView中嵌入复选框CheckBox四种方法

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  7. Web版需求征集系统所得1,servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> &lt ...

  8. 关于Unity中NGUI的Checkbox复选框、Slider滑动条和Button的6种触发回调事件的方式

    Checkbox复选框 1.创建一个NGUI背景Sprite1节点 2.打开NGUI---->Open---->Prefab Toolbar---->选择一个复选框节点,拖拽到背景节 ...

  9. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

随机推荐

  1. WebApi接口 - 如何在应用中调用webapi接口

    很高兴能再次和大家分享webapi接口的相关文章,本篇将要讲解的是如何在应用中调用webapi接口:对于大部分做内部管理系统及类似系统的朋友来说很少会去调用别人的接口,因此可能在这方面存在一些困惑,希 ...

  2. U盘快捷方式中毒处理办法

    这是网上某位大神的,对于我这个U盘总中毒的人真的很好用,太开心啦啦 http://blog.csdn.net/jzwong/article/details/51002568

  3. 如何开启PDO&comma;PDO&lowbar;MYSQL扩展

    开启这个功能的具体方法就是设置php.ini文件,步骤如下: 1.查看public_html目录下没有php.ini文件,如果有的, 打开文件查找 extension=php_pdo_mysql.dl ...

  4. stata

    1.只打开部分变量: use var1 var2 using "C:\data\2014.dta" 2.打开部分样本(5~10个样本) use "C:\data\2014 ...

  5. win10 UWP 蜘蛛网效果

    我看见了知乎首页登录背景和普通的地球人写的博客,发现了个好看的效果. 那么我来告诉大家如何做这个效果. 第一步是在 Canvas 画点,第二步是让点移动,第三步是画线 在 Canvas 画一个点 我们 ...

  6. tensorflow安装和初使用

    本文的目的是为了复习并帮助刚开始起步使用机器学习的人员 1.安装准备 为了方便就在window上安装,我的是window10 的笔记本,首先准备python 因为tensorflow在仅仅支持wind ...

  7. hdu 1527 (威佐夫博弈)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1527 Problem Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石 ...

  8. &lpar;简单&rpar;冒泡和直接选择排序同时调用swap算法

    void swap(int &a , int &b) { int temp; temp = a; a=b; b=temp; } void bubble(int a[],int n) { ...

  9. 打开&sol;查找xcode6的沙盒地目录

    用以下代码 打开沙盒目录 NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainM ...

  10. Python2 和 Python3 的区别(待完善)

    1.宏观上 python2 :源码不标准,混乱,重复代码太多 python3 :统一 标准,去除重复代码. 2. print python2 :括号可有可无 print(a)  或  print ap ...